jQuery mobile - 加载动态页面答案

【问题标题】：jQuery mobile -loading dynamic pagesjQuery mobile - 加载动态页面
【发布时间】：2011-11-15 18:32:09
【问题描述】：

我有一个 index.html 页面，它加载 jquery 和 jquery 移动库（最新版本）以及指向其他两个页面的链接。

<a href="page2.html" class="ui-state-persist" id='some_id' data-role="button" data-theme="e"  >Page2</a>

<a href="page3.html" class="ui-state-persist" id='some_id' data-role="button" data-theme="e"  >Page3</a>

是否可以在第 2 页和第 3 页中包含自定义 javascript 文件？如果我像这样 page2.html 正确呈现它们，但 js 文件似乎被忽略了。这样做的目的是在主菜单和应用程序页面之间分配加载 javascript 的等待时间。

page2.html:

<!DOCTYPE html>
<html>
    <head>
    <title>My Apptitle>
    <meta charset="utf-8"/>

    <!-- custom files and libraries --> 
    <script src="../js/mycode.js"></script> 
    </head>
    <body>

<div data-role="page"  id="preTktTab">
<div data-role="header" data-position="inline">
<!-- and so on -->

【问题讨论】：

标签： jquery jquery-mobile navigation

【解决方案1】：

这是我就一个非常相似的问题向某人提供的解释：jQueryMobile page events not firing when navigating to a different html page

基本上，当您导航到 jQuery Mobile 框架中的页面时，框架会通过 AJAX 将页面拉入 DOM。当它这样做时，它只抓取页面上第一个 <div data-role="page"> 元素中的 HTML，而忽略页面的其余部分。因此，如果您想在这些页面视图上加载 JavaScript，则需要在 <div data-role="page"> 元素内添加 <script> 标签。

例如，改变：

<html>
<head>
    <script src="..." type="text/javascript"></script>
</head>
<body>
    <div data-role="page">
        ...mobile page here...
    </div>
</body>
</html>

收件人：

<html>
<head>
</head>
<body>
    <div data-role="page">
        <script src="..." type="text/javascript"></script>
        ...mobile page here...
    </div>
</body>
</html>

这里有一些关于这个主题的好读物（请注意页面底部的“已知限制”）：http://jquerymobile.com/demos/1.0rc3/docs/pages/page-navmodel.html

【讨论】：

您的解决方案适用于 Mozilla 和 Chrome。不幸的是，在我们的移动浏览器 Blackberry 上，它加载了 javascript 文件，但当时似乎没有执行。
您可以使用eval() 来评估代码，例如：eval($('#page_id').find('script').html()); 但是如果您要拆分的代码只有 KB 左右，我不会担心拆分 JS起来。
您是否见过使用“延迟加载”javascript 构建大型 JQM 应用程序的示例或模型。看来你已经考虑过了！
目前我没有可以向您展示的示例，但我知道 Google 会做一些类似的事情。 Google 将在页面加载时加载注释掉的 JavaScript 块，并在初始加载发生后使用 eval() 将代码解析到 DOM 中（这加快了网页的初始渲染）。一个更简单的解决方案可能是编写一个代码块，该代码块包含在为页面加载特定脚本的每个页面上：$('#page_id').on('pagecreate', function () {$.getScript('path/to_js/file.js');});
Jasper - 感谢您的 cmets。几个问题 - 使用提到的第二种技术 - js 是否已缓存并可用于其他页面？在同一页面的后续加载中，每次返回页面时是否会重新加载 js？