Javascript-jQuery mobile-Pagecontainer从DOM中消失

2019-10-29 07:33:44 阅读：249 来源： 互联网

标签：dom jquery-mobile html javascript jquery

在jQuery mobile中,我想从外部文件加载pagecontainer.我可以将标记添加到DOM中,但是此后面临的问题是,一旦导航到#page2,整个#page1-div就会从DOM中消失,因此我无法返回(请参见下面的屏幕截图).

单击“转到第2页”之前的DOM

单击“转到第2页”后的DOM

如您所见,整个#page1-div都消失了.这是为什么？有什么想法吗？请在下面查看我的标记和代码：

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <title>Hello jqm</title>
    </head>
    <body>  
      <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

      <script> 
        $(document).ready(function(){   
          $(document).on( "pagecontainerload", function( event, ui ) {
            console.log('navigating to page1...');
            $.mobile.pageContainer.pagecontainer("change", "#page1");
            console.log('navigating done!');          
          } );

          console.log('loading pagecontainers...');
          $.mobile.pageContainer.pagecontainer("load", "page1.html");
          $.mobile.pageContainer.pagecontainer("load", "page2.html");
          console.log('pagecontainer-load done!');
        });
      </script>    
    </body>
</html>

page1.html

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
  </div>
</div>

page2.html

<div data-role="page" id="page2" class="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
  </div>
</div>

备注：这是对此的跟进问题：jQuery mobile – Splitting up pages to different files

解决方法:

当您浏览外部页面时,jQuery Mobile会删除它们.您应该将基本页面保留在DOM中缓存,而不是加载所有页面.

>解决方案一：在test.html中,添加page1.html的html标记,然后从外部加载page2.html.
>解决方案二：将data-dom-cache =“ true”添加到page1 div中,以使其即使在外部加载时也保持高速缓存.

<div data-role="page" id="page1" data-dom-cache="true">

更新资料

您可以一次缓存所有外部页面,而无需向每个页面div添加data-dom-cache.您需要做的就是在mobileinit事件中将页面小部件的domCache选项全局设置为true.该代码应放在jQuery.js之后和jQuery-Mobile.js之前.

<script src="jquery.js" />
<script>
   $(document).on("mobileinit", function () {
      $.mobile.page.prototype.options.domCache = true;
   });
</script>
<script src="jquery-mobile.js" />

标签：dom,jquery-mobile,html,javascript,jquery
来源： https://codeday.me/bug/20191029/1958510.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Javascript-jQuery mobile-Pagecontainer从DOM中消失