Question

鉴于 one-html - 多页应用程序，在我的每个页面中，我都计划JS注入长html代码和动画，这些代码和动画可能很重。 HTML代码：

<div data-role="page" id="page11">
  ...
</div>
<div data-role="page" id="page12">
 <h2 id="anchor12">Title: Page 12</h2>
 <script>myScript12() // inject complex content to #anchor12</script>
</div>

1。我的myScript12()何时被解雇？（当我打开.html文件或点击并打开＃page12

时

2。当我将＃page12留给另一个页面时，JS生成的内容会发生什么？

编辑：我不想在.html加载中加载我所有的20个重页。

解决方案： detailed explanation by Gajotres (JQM: document ready vs page events)的+1，以下是我当前的解决方案。仅在显示给定的data-role =“page”时运行js ...

使用以下JQM HTML / JS：

<div data-role="page" id="page12">
 <h2 id="anchor12">Title: Page 12</h2>
 <script>
$('#page12').on('pageinit') { //only run when page is displayed
     myScript12() // inject complex content to #anchor12
});</script>
</div>

Answer 1

只要网页加载到 DOM ，该脚本就会立即执行。这就是页面事件存在的原因。基本上，如果您想在代码执行时计时，请在页面事件中执行此操作。如果您想了解有关页面活动的更多信息，请阅读我的其他答案： jQuery Mobile: document ready vs page events 。
当您离开页面时，内容仍然存在 DOM 。如果您想阻止较大的 DOM 内容，可以使用pagehide事件来清除之前的网页内容。还有一个属性可以放在data-role =“page”div中，以防止 DOM 兑现。属性名称为 data-dom-cache="true" ，您可以找到更多名称here。

JQueryMobile：当data-role =“page”创建/删除JS生成的内容时？

1 个答案: