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

Question

我需要

1. 在页面 a 上，当单击指向页面 b 的链接时，ajax 注入 b 的，而不是刷新整个页面
2. 现在在b页上，按某个重新加载按钮会刷新整个页面，并运行一些js
3. 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 */
  });
});

演示