Question

我需要

在页面a上，当点击第b页的链接时，ajax会注入b，而不是刷新整个页面
现在在第b页，按某个重新加载按钮会刷新整个页面，并运行一些js
js不得多次加载

方法X）是标准方式，满足1,2但不满足3.单击第b页链接后会看到警报。

a.html
<before_page>
  <script>alert('abc')</script>
</before_page>
<page>
  <a href=b.html>b</a>
</page>
<after_page/>

-

b.html
<before_page>
  <script>alert('abc')</script>
</before_page>
<page/>
<after_page/>

方法Y）满足1,3但不满足2.

a.html
<before_page>
  <script>alert('abc')</script>
</before_page>
<page>
  <a href=c.html>c</a>
</page>
<after_page/>

-

c.html
<!--nothing before <page/> -->
<page/>
<!-- nothing after <page/>  -->

问题是如何满足所有1,2,3？

Answer 1

满足所有场景的简单选项是缓存外部页面并将代码放在每个页面的div中。缓存页面有两种方法，每个页面都使用data属性，或者全局启用它。

data属性：

<div data-role="page" data-cache-dom="true" id="pageID">
  <!-- JS code / libraries -->
</div>

全球

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

如果您不想缓存页面，另一个选项是，最好将所有JS库，代码和样式表放在每个页面的头部。它们只会加载一次。隐藏后删除外部页面，将页面div中的代码放在一起会反复加载相同的代码。

$(document).on("pagecreate", "#pageID", function () {
  $(".selector").on("event", function () {
    /* code */
  });
});

<强> Demo

可以ajax只加载<page>而不是HTML文档的所有内容吗？</page>

1 个答案: