Javascript Jquery Mobile - $.mobile.changepage 不加载外部 .JS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7449402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Mobile - $.mobile.changepage not loading external .JS files
提问by gabaum10
So I am having a hard time getting $.mobile.changePageto function properly. I call it like this:
所以我很难$.mobile.changePage正常工作。我这样称呼它：
$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );
But for some reason, when the HTML page is loaded, none of the external .js (the files that I wrote to actually do something) are included. I am following the significant loading conventions of
但出于某种原因，当加载 HTML 页面时，没有包含任何外部 .js（我编写的实际执行某些操作的文件）。我遵循重要的加载约定
-Jquery
-(CUSTOM JS)
-Jquery Mobile
Does anyone know why this is not getting loaded properly? Also, the pageshow function is not getting fired either, which is strange. It looks like this:
有谁知道为什么这不能正确加载？此外，pageshow 功能也没有被触发，这很奇怪。它看起来像这样：
$("div[data-role*='page']").live('pageshow', function(event, ui) {
loadFormFields();
});
Now the page is rendered, but none of the functional things happen. If I hack it and do something like this:
现在页面已呈现，但没有任何功能性的事情发生。如果我破解它并执行以下操作：
document.location.href="DataformsM-AddRecord.html";
It will function properly.
它将正常运行。
回答by Jasper
jQuery Mobile does not pull the whole page into the dom, it grabs the firstdata-role="page"element and its descendants and pulls that into the current dom.
jQuery Mobile 不会将整个页面拉入 dom，它会抓取第一个data-role="page"元素及其后代并将其拉入当前 dom。
So any scripts in the <head>of the document will not be included.
因此<head>不会包含文档中的任何脚本。
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
我通常将我网站的所有功能 JavaScript 放在索引页面上，然后当外部页面加载到 dom 时，它们可以从已经加载的脚本中受益。
Also, you can place JavaScript code inside the data-role="page"element and it will be included when jQuery Mobile does its AJAX load of the page.
此外，您可以将 JavaScript 代码放置在data-role="page"元素内，当 jQuery Mobile 对页面进行 AJAX 加载时，它将被包含在内。
UPDATE
更新
A good system for this is to put all of your JS into an include file and include it on each page of the site. It will be ignored if pages are brought into the DOM by AJAX, but if someone refreshes somewhere in your site, the JS will be available.
一个很好的系统是将所有 JS 放入一个包含文件中，并将其包含在站点的每个页面上。如果通过 AJAX 将页面带入 DOM，它将被忽略，但如果有人刷新您站点中的某个位置，则 JS 将可用。
回答by gabaum10
So building off of what Jasper so wisely noted above, I came up with a working solution.
因此，基于 Jasper 上面如此明智地指出的内容，我想出了一个可行的解决方案。
Basically I Load up all of my JS and CSS files into the index page to start. Now when you load, this method will be triggered for the pageshow
基本上，我将所有 JS 和 CSS 文件加载到索引页中以开始。现在当你加载时，这个方法将被触发pageshow
$("div[id*='page1']").live('pageshow', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
doStuffWhenPageintializes();
});
Once I call the $.mobile.changePage( "someOtherPage.html", { transition: "slide"} );, the pagehidemethod will get fired for the page1 object. This is where you can trigger the method to initialize the page you are transitioning to.
一旦我调用$.mobile.changePage( "someOtherPage.html", { transition: "slide"} );，该pagehide方法就会被 page1 对象触发。您可以在此处触发方法来初始化您要转换到的页面。
$("div[id*='page1']").live('pagehide', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
loadStuffForNewPage();
});
Now you can remove the document.location.href="external.html"line and simply use the native JQM call. Hope this helps some people.
现在您可以删除该document.location.href="external.html"行并简单地使用本机 JQM 调用。希望这可以帮助一些人。
回答by Sheetal
Kindly repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will re create head section...
请用每个 html 页面中的所有脚本重复 head 部分，因为更改页面将导致页面重新加载并重新创建 head 部分...
a simple change page like this would then work:
这样一个简单的更改页面就可以工作了：
$.mobile.changePage('abc.html', {
transition: 'slide'
});
回答by Mike
It seems that there is no "right" way provided by JQM to load external html files. Thanks a bunch to Jasper for the solution.
似乎 JQM 没有提供“正确”的方式来加载外部 html 文件。非常感谢 Jasper 的解决方案。
JQM suggests an AJAX reload if we want to switch to external pages, like:
如果我们想切换到外部页面，JQM 建议使用 AJAX 重新加载，例如：
<a href="foo.html" rel="external">
or
或者
<a href="foo.html" data-ajax="false">
I tried both but they didn't work - I"m programming for native apps, so maybe it may work for web apps?
我两个都试过了，但都没有用——我正在为原生应用程序编程，所以也许它适用于网络应用程序？
回答by Hanzala Ali
I solved this by putting script in the head section of last loaded page that helped and worked for me. JQM is not getting the head section of recently loaded page in the DOM so not bringing the JS content of the recent page. By putting all the script in an External JS file or by putting it in the head section of very first page might do the trick for you.
我通过将脚本放在最后加载的页面的头部部分来解决这个问题，这对我有帮助和工作。JQM 没有在 DOM 中获取最近加载页面的 head 部分，因此没有带来最近页面的 JS 内容。通过将所有脚本放在外部 JS 文件中或将其放在第一页的头部部分，可能对您有用。
回答by codewarrior
I too am looking for this solution the "correct way" for loading external pages. However, I will concur, that your hack does indeed work. I'll take the hack for now:
我也在寻找此解决方案加载外部页面的“正确方法”。但是，我同意您的 hack 确实有效。我现在就来破解：
$(document).ready(function(){
$("#page1").bind('ended', function(){
$.mobile.changePage($(document.location.href="external.html"), 'fade');
});
});
