Javascript загружен только в первый раз или после обновления

-2

Я создаю кросс-платформенное приложение с Cordova и jQuery Mobile 1.4.5, у меня есть простая страница html, которая должна загрузить файл javascript.Javascript загружен только в первый раз или после обновления

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
     <meta name="format-detection" content="telephone=no"> 
     <meta name="msapplication-tap-highlight" content="no"> 

     <!-- Include jQUERY ---> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="jquery/jquery.mobile-1.4.5.css"> 
     <link rel="stylesheet" href="css/custom-icons.css"> 
     <script src="jquery/jquery.js"></script> 
     <script src="jquery/jquery.mobile-1.4.5.js"></script> 

     <title>myPage</title> 
    </head> 
    <body> 
     <!-- jQUERY HEADER is a navigation bar with multiple options --> 
     <div data-role="header"> 
      <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
      <h1>my app</h1> 
      <div data-role="navbar"> 
       <ul id="nav-bar"> 
        <li><a href="a.html" data-page="a">a</a></li> 
        <li><a href="b.html" data-page="b">b</a></li> 
        <li><a href="c.html" data-page="c">c</a></li> 
       </ul> 
      </div> 
     </div> 

     <div role="main" class="ui-content"> 
      <center><h3><i>A title</i></h3> 

      <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> 
       <legend>my legend</legend> 
       <input type="checkbox" data-role="flipswitch" name="flip1" id="flip1"> 
       <input type="checkbox" data-role="flipswitch" name="flip2" id="flip2"> 
       <input type="checkbox" data-role="flipswitch" name="flip3" id="flip3"> 
       <input type="checkbox" data-role="flipswitch" name="flip4" id="flip4"> 
      </fieldset> 
      </center> 
     </div> 

     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript" src="js/home.js"></script> 
    </body> 
</html>

Однако файл home.js загружается только в первый раз (или при обновлении), но если я, например, на b.html и я перейти к странице выше (index.html), то home.js не выполняется.

Файл дома home.js просто содержит console.log("executed");, который печатается при Cordova загружает файл index.html, но не тогда, когда я позже вручную перейти на эту страницу с помощью навигационной панели.

РЕДАКТИРОВАТЬ: Обратите внимание, что на других страницах этого поведения нет. Например, страница ниже всегда загружает файл javascript.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
     <meta name="format-detection" content="telephone=no"> 
     <meta name="msapplication-tap-highlight" content="no"> 
     <!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
     <link rel="stylesheet" type="text/css" href="css/index.css"> --> 

     <!-- Include jQUERY ---> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="jquery/jquery.mobile-1.4.5.css"> 
     <link rel="stylesheet" href="css/custom-icons.css"> 
     <script src="jquery/jquery.js"></script> 
     <script src="jquery/jquery.mobile-1.4.5.js"></script> 

     <title>bla bla</title> 
    </head> 
    <body> 
     <!-- jQUERY HEADER is a navigation bar with multiple options --> 
     <div data-role="header"> 
      <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
      <h1>smartHub</h1> 
      <div data-role="navbar"> 
       <ul id="nav-bar"> 
        <li><a href="a.html" data-page="a">a</a></li> 
        <li><a href="b.html" data-page="b">b</a></li> 
        <li><a href="c.html" data-page="c">c</a></li> 
       </ul> 
      </div> 
     </div> 

     <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> 
      <h1>...</h1> 
      <ul data-role="listview" data-inset="false"> 
       ... 
      </ul> 
     </div> 

     <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> 
      <h1>...</h1> 
      <ul data-role="listview" data-inset="false"> 
       ... 
      </ul> 
     </div> 

     <script type="text/javascript" src="js/someOtherFile.js"></script> 
    </body> 
</html>

EDIT: Я «фиксированный» проблему, изменив ссылку на домашнюю страницу в заголовке этого <a href="#" id="homeButton" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>, а затем положить на обработчик щелчка по кнопке дома, как это:

$("#homeButton").on("click", function() { 
    window.location.replace("index.html"); 
});

Это эквивалентно просмотру страницы. Однако я не считаю это правильным решением. Было бы хорошо, если бы кто-нибудь мог указать, почему моя домашняя страница демонстрирует такое поведение.

Кроме того, это на самом деле не является решением вообще, так как кажется, что вещи я поместил в localStorage теряются при перенаправлении index.html ...

EDIT: я воспроизвел эту проблему как можно более простым , Воспроизведение содержит два html-файла, которые можно найти here. При просмотре до index.html он печатает On index.html, затем мы можем использовать навигационную панель, чтобы перейти к a.html, которая будет печатать On page a.html. Если мы снова перейдем к индексу, нажав кнопку «домой», он больше не будет печатать On index.html (следовательно, сценарий не будет выполнен), а если мы снова перейдем к a.html, он напечатает On page a.html (следовательно, этот скрипт выполняется каждый раз мы переходим на страницу, пока скрипт на индексной странице не работает).

источник

2016-10-02 HyperZ

У 'b.html' есть один и тот же HTML-код? – fzzle

@fzzle 'b.html' содержит тот же заголовок, но, конечно, имеет другое тело и включает в себя другой файл javascript. – HyperZ

Может ли нижестоящий избиратель хотя бы быть конструктивным? В чем причина этого? – HyperZ

С JQuery Mobile index.html становится контейнером для всех страниц в вашем приложении. Поэтому, когда пользователь переходит к a.html, его содержимое вводится в DOM, уже созданную для index.html. Сценарий в index.html остается активным. index.html Содержимое остается в DOM, но скрыто.Когда пользователь переместится на index.html, содержимое index.html просто станет видимым снова. Содержимое a.html удаляется из DOM.

Когда пользователь снова перейдет к a.html, его содержимое снова будет введено в DOM, снова выполнив любой скрипт внутри него.

Возьмите эти страницы и посмотрите консоль.

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- Include jQUERY --> 
     <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
     <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

     <title>Index page</title> 
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-role="header"> 
       <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
       <h1>My app title</h1> 
       <div data-role="navbar"> 
        <ul id="nav-bar"> 
         <li><a href="a.html" data-page="a">a</a></li> 
         <li><a href="#" data-page="b">b</a></li> 
         <li><a href="#" data-page="c">c</a></li> 
        </ul> 
       </div> 
      </div> 

      <div role="main" class="ui-content"> 
       <h3><i>Some title</i></h3> 
      </div> 

      <script> 
       console.log("On index.html"); 
      </script> 
     </div> 
     <script> 
      $(document).on('pageshow', function() { 
       // catch the ID of the active page 
       var curID = $('.ui-page-active').attr('id'); 
       console.log("curID: " + curID); 
       switch (curID) { 
        // code here 
        default: break; 
       } 
      }); 
     </script> 
    </body> 
</html>

a.html:

<html> 
    <head> 
     <!-- Note: no need to re-include the jQM-files. They're already around. --> 
     <title>Other page page</title> 
    </head> 
    <body> 
     <div data-role="page" id="pageA"> 
      <div data-role="header"> 
       <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
       <h1>My app title</h1> 
       <div data-role="navbar"> 
        <ul id="nav-bar"> 
         <li><a href="a.html" data-page="a">a</a></li> 
         <li><a href="#" data-page="b">b</a></li> 
         <li><a href="#" data-page="c">c</a></li> 
        </ul> 
       </div> 
      </div> 

      <div role="main" class="ui-content"> 
       <p>Page a</p> 
      </div> 
      <script> 
       console.log("On page a.html"); 
      </script> 
     </div> 
    </body> 
</html>

Обратите внимание, что я добавил DIVs с data-role="page" и с уникальными идентификаторами в обоих файлах.

Обработчик события pageshow является ключевым. Он запускается каждый раз, когда jQM показывает «страницу». (В index.html может быть несколько элементов с data-role="page", все они рассматриваются как «страницы»).

источник

2016-10-04 09:43:42 RonaldPK

Спасибо, я только что разобрался, разговаривая с колледжем около часа назад. Спасибо за вашу помощь! – HyperZ

Это проблема кэширования, вы можете использовать управление версиями для вашего файла JS:

Пример:

<script type="text/javascript" src="js/home.js?version=1.0.0.5"></script>

источник

2016-10-02 22:38:04

Не могли бы вы быть более откровенными? Я не занимаюсь веб-разработкой. Что это будет делать в точности? Всегда ли нужно отправлять новый номер случайной версии, если я не хочу, чтобы файл был кэширован? – HyperZ

Если вы разрабатываете и активно редактируете файл, вы можете установить управление версиями (если включено кеширование) или вы можете отключить кеширование через .htaccess. Надеюсь, я правильно понял ваш вопрос. Если нет, пожалуйста, поправьте меня –

Поскольку эти страницы по-прежнему действительно базовые, я могу проверить его в браузере. Я использую сафари и деактивированное кеширование, чтобы проверить, является ли это проблемой кэширования. Однако проблема сохраняется, и я действительно не понимаю, почему. Другие страницы не имеют этой проблемы, я наткнулся на то, почему .. – HyperZ

К сожалению, я не могу комментировать сейчас. Я пытаюсь предложить попробовать поставить нужный JS в ваш index.html или index. blah blah blah. Или поместить его в нагруженном view/page

Приветствиях

источник

2016-10-03 03:35:30

Я считаю встроенные скрипты плохими, особенно для больших файлов. В моем случае код javascript составляет около 200 loc, что было бы ужасно, если бы он был встроен в html-файл. – HyperZ

Javascript загружен только в первый раз или после обновления

ответ

Смежные вопросы