Question

当页面转换到另一个页面（并使用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等等。

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

Answer 2

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

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

可以有效地更改所有脚本以及

中包含的所有内容

    <head></head>

标签未加载。

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

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

谢谢， Dinesh Parne

Answer 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"> ...

Answer 4

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

但在大多数时间里，第一名是最好的

Answer 5

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

Answer 6

我遇到了同样的问题，如果您使用转换标记尝试添加php.ini属性。这对我有用。

Answer 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加载之前进行的。

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

7 个答案: