如何在使用 jQuery Mobile 转换页面后执行 JavaScript答案

【问题标题】：How to execute JavaScript after a page is transitioned with jQuery Mobile如何在使用 jQuery Mobile 转换页面后执行 JavaScript
【发布时间】：2011-03-16 22:47:12
【问题描述】：

当一个页面转换到另一个页面时（并使用 location.hash 东西），第二个页面不会加载任何 JavaScript。加载页面时如何执行 JavaScript（如果此页面“来自”其父级的转换）？

我有 page1.html，带有指向 page2.html 的链接。此 page2.html 加载时带有过渡效果（默认为幻灯片效果）。

在 page2.html 中不执行任何 JavaScript。我尝试了一个简单的

<script type="text/javascript">
alert("x");
</script>

但不起作用。我试过很多document.ready、bind、live、oncreate、pagecreate等等。

【问题讨论】：

您能否进一步说明您正在尝试做的事情？如果这是 HTML 问题，您是手动编写 HTML 还是动态生成它。如果是后者，你打算使用什么语言？
我用更多信息编辑了问题

标签： jquery jquery-mobile

【解决方案1】：

您可以使用回调函数。动画后调用一个函数。

在 jQuery 中：

$('#yourElement').animate({
    opacity: 0.25,
  }, 5000, function() {
    // Animation complete. add your callback logic here
});

如果使用 Webkit 转换：

$('#yourElement').addEventListener(
 'webkitTransitionEnd',
 function( event ) {
     // Animation complete. add your callback logic here
 }, false );

如果使用 jQuery Mobile，您似乎可以使用 'pageshow' 和 'pagehide' 事件侦听器：

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);
});

【讨论】：

对不起，我不处理动画。 jQueryMobile 中页面之间的转换是硬编码的。
我用提到 pageshow 事件的 jQM 文档的链接更新了我的答案。看起来这应该是你需要的。
感谢 DA，但它不起作用......在 initializePage() 事件之前调用了事件......我检查了原始源代码......我会写信给开发人员放置一个“未完成" 在那个“真正的最后”事件中是可选的......无论如何谢谢你
hmm...在这里看起来像一个类似的问题：forum.jquery.com/topic/… 不确定它是否适用于您，但也许它会有所帮助。
嗯，这只是用于列表视图......但是谢谢！

【解决方案2】：

基本上在 Jquerymobile 中，当您只对里面的内容进行页面转换时

    <div data-role="page">
    ...
    </div>

如此有效地改变了你所有的脚本和你所包含的一切

    <head></head>

标签未加载。

所以要解决这个问题，您需要在页面中包含您的脚本，如下所示

    <div data-role="page">
    ...
    <script type="text/javascript" src="yourScript.js"></script>
    </div>

谢谢，迪内什·帕恩

【讨论】：

通过脚本标签加载 .js 文件会起作用，但这需要为每个需要脚本的页面创建一个单独的文件。这不仅对于每个页面只需要几行初始化代码的常见情况非常笨拙，而且通常会遇到缓存问题，即页面脚本只会在第一次访问页面时执行。

【解决方案3】：

这里似乎也强调了这个问题： jquerymobile - include .js and .html

通过将所有 JavaScript 都定位/包含在第一页上，我取得了成功，并且对于每个链接的页面，我都将代码包装在一个块中，如下所示：

$('#page2').live('pageshow',function(){

   //page twos JS                  
});

$('#page3').live('pageshow',function(){

   //page threes JS                  
});

当然，每个文档都必须包含具有相应 id 的常用容器：

<section id="page2" data-role="page" data-theme="a"> ...

【讨论】：

【解决方案4】：

有两种方法可以做到这一点 1.) 在第一页添加所有脚本文件 2.) 每当调用新页面时，您使用链接 rel="external"（例如 <a href="#demo" rel="external">Next Page</a>）这样做时，下一页将执行其标题部分

但在大多数情况下，前 1 是最好的

【讨论】：

【解决方案5】：

rel="external" 的问题在于它意味着任何 JQuery Mobile 页面转换都不起作用......

【讨论】：

【解决方案6】：

如果您使用标签进行转换，我遇到了同样的问题尝试添加target="_self" 属性。这对我来说有点用。

【讨论】：

【解决方案7】：

正确的做法是：

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);
  }
}

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>

在加载 jquery 之后设置上述内容，但在加载 jquery.mobile 之前设置。

【讨论】：