Как выполнить JavaScript после перехода страницы с помощью jQuery Mobile

Когда страница выполняет переход на другую (и использует материал 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 и так далее.


jquery jquery-mobile
person FlamingMoe    schedule 16.03.2011    source источник
comment
Можете ли вы пролить немного больше света на то, что вы пытаетесь сделать? Если это вопрос HTML, вы пишете HTML вручную или создаете его динамически. Если второе, то какой язык вы собираетесь использовать?   -  person amccormack    schedule 17.03.2011
comment
Я отредактировал вопрос с дополнительной информацией   -  person FlamingMoe    schedule 17.03.2011

Ответы (7)


arrow_upward
9
arrow_downward

Вы можете использовать функцию обратного вызова. После анимации вызовите функцию.

в 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);
});
person DA.    schedule 17.03.2011
comment
Извините, но я не занимаюсь анимацией. Переход между страницами в jQueryMobile жестко запрограммирован. - person FlamingMoe; 17.03.2011
comment
Я обновил свой ответ ссылкой на документацию jQM, в которой упоминается событие pageshow. Похоже, это должно быть то, что вам нужно. - person DA.; 17.03.2011
comment
Спасибо, DA, но это не работает... эти события вызываются перед событием initializePage()... Я проверил оригинальный исходный код... Я напишу разработчикам, чтобы они добавили необязательное значение oncomplete в это настоящее последнее событие... в любом случае, спасибо - person FlamingMoe; 17.03.2011
comment
хм... здесь похожая проблема: forum .jquery.com/topic/ не уверен, что это применимо к вам, но, возможно, это поможет. - person DA.; 17.03.2011
comment
хм, это только для просмотра списка ... но спасибо! - person FlamingMoe; 17.03.2011
comment
сообщите, если найдете решение. Мне самому любопытно. - person DA.; 17.03.2011

arrow_upward
9
arrow_downward

В основном в Jquerymobile, когда вы выполняете переход страницы, только содержимое внутри

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

изменяется настолько эффективно, что все ваши сценарии и все, что вы включили в

    <head></head>

теги не загружаются.

Поэтому, чтобы решить эту проблему, вам нужно включить свой скрипт на страницу, как показано ниже.

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

Спасибо, Динеш Парне.

person Dinesh Reddy Parne    schedule 25.06.2012
comment
Загрузка файла .js с помощью тега script будет работать, но для этого требуется отдельный файл для каждой страницы, которая вызывает скрипт. Это не только довольно неуклюже для общего случая, когда вам нужно всего несколько строк кода инициализации для каждой страницы, но и, как правило, страдает от проблем с кешем, то есть скрипт для страницы будет выполняться только при первом посещении страницы. - person John Larson; 16.10.2013

arrow_upward
3
arrow_downward

Также эта проблема, кажется, выделена здесь: 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"> ...
person ChristoKiwi    schedule 01.03.2012

arrow_upward
0
arrow_downward

Есть два способа сделать это 1.) Добавить все файлы сценариев на самую первую страницу 2.) Всякий раз, когда вызывается новая страница. Вы используете ссылку rel="external" (например, <a href="#demo" rel="external">Next Page</a>) при этом, тогда следующая страница будет выполнять свой раздел заголовка

Но первый 1 лучше в большинстве случаев

person Blu    schedule 27.05.2013

arrow_upward
0
arrow_downward

Проблема с rel="external" заключается в том, что это означает, что любые переходы страниц JQuery Mobile не будут работать....

person Scotsman    schedule 09.05.2015

arrow_upward
0
arrow_downward

У меня была такая же проблема, если вы используете тег для перехода, попробуйте добавить к нему атрибут target="_self". Это сработало для меня.

person Nisarg    schedule 12.04.2017

arrow_upward
0
arrow_downward

Правильный способ сделать это:

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.

person ppetree    schedule 28.06.2019