Question

我有一个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 -->

Answer 1

以下是我向某人提供的有关非常类似问题的解释：jQueryMobile page events not firing when navigating to a different html page

基本上，当你导航到jQuery Mobile框架中的页面时，框架会通过AJAX将页面拉入DOM。执行此操作时，它只会抓取页面上第一个<div data-role="page">元素内的HTML并忽略页面的其余部分。因此，如果您要在这些网页浏览量上加载JavaScript，则需要在<script>元素中添加<div data-role="page">标记。

例如，更改：

<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

jQuery移动加载动态页面

1 个答案: