如何在使用 jQuery Mobile 转换页面后执行 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5332772/
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
How to execute JavaScript after a page is transitioned with jQuery Mobile
提问by FlamingMoe
When a page do a transition to another (and use the location.hashstuff) , this second page does not load any JavaScript. How can I execute JavaScript when a page is loaded (if this one "comes" from a transition from its parent) ?
当一个页面转换到另一个页面（并使用这些location.hash东西）时，第二个页面不会加载任何 JavaScript。加载页面时如何执行 JavaScript（如果这个页面“来自”来自其父页面的转换）？
I have page1.html, with a link to page2.html. This page2.html loads with a transition (slide effect by default).
我有 page1.html，有一个指向 page2.html 的链接。这个 page2.html 加载了一个过渡效果（默认情况下是幻灯片效果）。
In page2.html no JavaScript is executed. I tried with a simple
在 page2.html 中没有执行 JavaScript。我试过一个简单的
<script type="text/javascript">
alert("x");
</script>
but does not work. I tried with a lot of document.ready, bind, live, oncreate, pagecreate, and so on.
但不起作用。我尝试了很多document.ready, bind, live, oncreate, pagecreate, 等等。
回答by Dinesh Reddy Parne
Basically in Jquerymobile when you do a page transition only the content inside
基本上在 Jquerymobile 中，当您进行页面转换时，只有里面的内容
<div data-role="page">
...
</div>
gets changed so effectively all your scripts and everything you have included in
如此有效地更改了您的所有脚本以及您包含的所有内容
<head></head>
tags is not getting loaded.
标签未加载。
So to solve this you need to include your script inside the page, like below
所以要解决这个问题，你需要在页面中包含你的脚本，如下所示
<div data-role="page">
...
<script type="text/javascript" src="yourScript.js"></script>
</div>
Thanks, Dinesh Parne
谢谢，迪内什·帕恩
回答by DA.
You could use a callback function. After the animation call a function.
您可以使用回调函数。动画结束后调用一个函数。
in jQuery:
在 jQuery 中：
$('#yourElement').animate({
opacity: 0.25,
}, 5000, function() {
// Animation complete. add your callback logic here
});
If using Webkit transitions:
如果使用 Webkit 转换：
$('#yourElement').addEventListener(
'webkitTransitionEnd',
function( event ) {
// Animation complete. add your callback logic here
}, false );
And if using jQuery Mobile, it appears you can use the 'pageshow' and 'pagehide' event listeners:
如果使用 jQuery Mobile，您似乎可以使用 'pageshow' 和 'pagehide' 事件侦听器：
http://jquerymobile.com/test/docs/api/events.html
http://jquerymobile.com/test/docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
回答by ChristoKiwi
Also this issue seems to be highlighted here: jquerymobile - include .js and .html
这个问题似乎也在这里突出显示： jquerymobile - include .js and .html
I've had success by having ALL the JavaScript located/included on the very first page, and for each linked page I have wrapped the code inside a block like this:
通过将所有 JavaScript 定位/包含在第一页上，我取得了成功，并且对于每个链接页面，我都将代码包装在这样的块中：
$('#page2').live('pageshow',function(){
//page twos JS
});
$('#page3').live('pageshow',function(){
//page threes JS
});
And of course each document must include the usual container with the corresponding id:
当然，每个文档都必须包含具有相应 id 的常用容器：
<section id="page2" data-role="page" data-theme="a"> ...
回答by Blu
There are two ways to doing this
1.) Add all script files in very first page
2.) Whenever calls new page You use link rel="external" (eg <a href="#demo" rel="external">Next Page</a>)
when doing this then the next page will execute its header section
有两种方法可以做到这一点 1.) 在第一页中添加所有脚本文件 2.) 每当调用新页面时您使用 link rel="external" (eg <a href="#demo" rel="external">Next Page</a>) 执行此操作时，下一页将执行其标题部分
But first 1 is best in most of the time
但大多数时候第一个是最好的
回答by Scotsman
Problem with rel="external"is that it means any JQuery Mobile page transitions won't work....
问题rel="external"在于这意味着任何 JQuery Mobile 页面转换都不起作用......
回答by Nisarg
I had kind of same problem, if you are using tag for transition Try adding target="_self"attribute to it. It kind of worked for me.
我遇到了同样的问题，如果您使用标记进行转换，请尝试target="_self"向其添加属性。这对我有用。
回答by ppetree
The correct way to do this is:
正确的做法是：
function pageEngine(event, ui)
{
// this is the page change engine. It makes sure the appropriate
// javascript files get loaded and the page init function gets called
console.log("pageEngine: " +ui.toPage[0].id);
// ui.toPage[0].id = the id in the data-role="page"
// <div id="debugPage" data-role="page" data-theme="b">
switch(ui.toPage[0].id)
{
case "homePage":
homePageReady(); // reinit the home page - i.e. update unreads
break;
case "mapPage":
$.getScript("js/map.js", function( data, textStatus, jqxhr ) {
onMapPageReady();
}).fail(function(xhr, textStatus, error) { jsLoadError(xhr, textStatus, error, "map.js"); });
break;
case "thirdPage":
// do nothing as this page requires no .js
break;
default:
console.log("page not found: " +ui.toPage[0].id);
}
}
The pageEngine() gets called from a little function tied to window.onload like this:
pageEngine() 从一个绑定到 window.onload 的小函数中被调用，如下所示：
<script type="text/javascript">
window.onload = function()
{
console.log("window.onload: " +timeStamp());
document.addEventListener("deviceready", onDeviceReady, false);
$(document).on("pagecontainerbeforeshow", function( event, ui ) {
if(typeof ui.toPage == "undefined" || typeof ui.toPage[0] == "undefined")
{
// during startup and app init there are a lot of these
console.log("toPage[0] is undefined");
return;
}
else
{
console.log("pagecontainerbeforeshow: " +ui.toPage[0].id);
}
pageEngine(event, ui);
});
}
</script>
The above gets set AFTER jquery is loaded but BEFORE jquery.mobile is loaded.
上面的设置是在 jquery 加载后但在 jquery.mobile 加载之前设置的。
