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

发布于 2024-10-24 05:53:35 字数 476 浏览 2 评论 0原文

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

原文

When a page do a transition to another (and use the location.hash stuff) , 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) ?

I have page1.html, with a link to page2.html. This page2.html loads with a transition (slide effect by default).

In page2.html no JavaScript is executed. I tried with a simple

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盛夏尉蓝 2024-10-31 05:53:35

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

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

You could use a callback function. After the animation call a function.

in jQuery:

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

If using Webkit transitions:

$('#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:

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

回复收藏 0 原文

尽揽少女心 2024-10-31 05:53:35

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

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

会发生更改，因此您的所有脚本和

    <head></head>

标记中包含的所有内容都不会被加载。

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

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

谢谢，
迪内什·帕内

Basically in Jquerymobile when you do a page transition only the content inside

    <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

回复收藏 0 原文

长不大的小祸害 2024-10-31 05:53:35

此外，这个问题似乎在这里突出显示：
jquerymobile - 包含 .js 和 .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"> ...

Also this issue seems to be highlighted here:
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:

$('#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:

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

回复收藏 0 原文

沐歌 2024-10-31 05:53:35

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

但在大多数情况下，第一个是最好的

回复收藏 0 原文

吃→可爱长大的 2024-10-31 05:53:35

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

回复收藏 0 原文

心凉怎暖 2024-10-31 05:53:35

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

回复收藏 0 原文

颜漓半夏 2024-10-31 05:53:35

正确的方法是：

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 之前设置的。

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:

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

回复收藏 0 原文

~没有更多了~