How to execute JavaScript after a page is transitioned with jQuery Mobile_问答_开发者

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 l开发者_运维百科ot of document.ready, bind, live, oncreate, pagecreate, and so on.

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

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

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

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

But first 1 is best in most of the time

Problem with rel="external" is that it means any JQuery Mobile page transitions won't work....

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.

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.