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

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

8 голосов
/ 17 марта 2011

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

Ответы [ 7 ]

9 голосов
/ 25 июня 2012

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

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

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

    <head></head>

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

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

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

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

9 голосов
/ 17 марта 2011

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

в 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);
});
3 голосов
/ 02 марта 2012

Также эта проблема, кажется, выделена здесь: jquerymobile - включите .js и .html

Я добился успеха, разместив / включив ВСЕ JavaScript на самой первой странице.и для каждой связанной страницы я обернул код внутри блока следующим образом: 

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

   //page twos JS                  
});

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

   //page threes JS                  
});

И, конечно, каждый документ должен включать обычный контейнер с соответствующим идентификатором: 

<section id="page2" data-role="page" data-theme="a"> ...
0 голосов
/ 29 июня 2019

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

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.

0 голосов
/ 12 апреля 2017

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

0 голосов
/ 09 мая 2015

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

0 голосов
/ 27 мая 2013

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...