jQuery的移动加载动态页面

我有一个index.html页面加载jquery和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 -->

来源

2011-11-15 Mustapha George

下面是我给某人一个非常类似的问题作出解释：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

来源

2011-11-15 18:40:58 Jasper

您的解决方案适用于Mozilla和Chrome。不幸的是，在我们的手机浏览器Blackberry上，它加载了JavaScript文件，但似乎并未执行。 –

你可以使用'eval（）'来评估代码，如下所示：'eval（$（'＃page_id'）。find（'script'）。html（））;'但是如果你正在破解的代码只是一个KB左右，我不会担心分裂JS。 – Jasper

您是否看到过使用“后期加载”javascript构建大型JQM应用的示例或模型？看起来你已经想到了这一点！ –

jQuery的移动加载动态页面

回答

相关问题