有没有办法在 jquery 移动 ajax 负载上抓取 javascript
Posted
技术标签:
【中文标题】有没有办法在 jquery 移动 ajax 负载上抓取 javascript【英文标题】：Is there a way to grab javascript on jquery mobile ajax loads 【发布时间】：2012-01-21 00:11:17 【问题描述】：我知道当您使用 ajax 使用 jquery mobile 切换页面时，它只会使用 data-role="page" 抓取正文中的 DOM。问题是这是一个在移动设备上运行的 phonegap 应用程序，因此在没有 ajax 的情况下进行全页面加载对于获取所有 JS、CSS 脚本来说非常缓慢。
我一直在四处寻找尝试不同的东西。文档说您可以将 javascript 附加到 dom 并将其放在 data-role="page" 元素下，但我仍然无法以这种方式触发它。
我目前正在尝试的是在第一页顶部包含一个引导脚本，并且在 pagechange 上它尝试在 dom 中插入特定于该页面的 js
function insertScript(script, container)
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'Assets/Scripts/' + script + '.js';
container.appendChild(elem);
$(document).bind('pagechange', function(event)
//get the path to the html asset
var path = document.location.pathname;
//split up
var arr = path.split('/');
//get the relevant part of the path ie index.html
var page = arr[arr.length-1];
// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
var pages = $('div[data-role="page"]'),
// the current page is always the last div in the Array, so we store it in a variable
currentPage = pages[pages.length-1];
//if the page is index add index.js to the last dom node
if (page == 'index.html')
insertScript('index', currentPage);
);
那么例如 index.js 有以下内容
$("#start_page").live('pageinit', function()
alert('on start page');
);
但 pageinit 函数永远不会触发。任何想法
**编辑：
我有多个 html 页面，例如使用 index.html 和 home.html
*index.html
<html>
<head>
<script type="text/javascript" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$("#index_page").live('pageinit', function()
//do some page specific js functions for index.html
);
</head>
<body>
<div data-role="page" id="index_page">
<a href='home.html'>go to home page</a>
</div>
</body>
</html>
**home.html
<html>
<head>
<script type="text/javascript">
$("#home_page").live('pageinit', function()
//this is the JS I want to pull
);
</head>
<body>
<div data-role="page" id="home_page">
<h1>this is the home page</h1>
</div>
</body>
</html>
所以当我点击从 index 到 home 的链接时会发生什么，dom 会更新，但 home.html 页面上的任何 JS 都不会通过 AJAX 插入到页面中，所以我试图找出一种方法这样做。
我知道我可以在一个页面中包含我的所有 js，但我真的想避免这种情况，因为我有很多页面，它会很快变得混乱。
【问题讨论】：
【参考方案1】：请记住，当 jQuery Mobile 通过 AJAX 加载另一个页面时，它所做的只是将新页面中的 <div data-role="page"> 插入到现有页面的 <body> 中。 div 之外的任何东西都可能不存在。因此，当您拉入第二页时，您要插入的脚本实际上并不存在。
然后您可以执行的方法是 - 将脚本包含在您的页面 div 中，或在 HEAD 中加载您的所有 javascript。这点小智慧你也应该注意
http://code.jquery.com/mobile/latest/demos/docs/api/events.html
“要在初始页面加载期间调用这些处理程序，您必须在 jQuery Mobile 执行之前绑定它们。这可以在 mobileinit 处理程序中完成，如全局配置页面所述。”
哦，还有一件事要记住...将 javascript 复制到已加载的页面中实际上不会执行它；）
【讨论】：
即使JS被包裹在pageInit事件中？ ***.com/questions/1197575/… 在这里似乎很有帮助。但我仍然认为您将遇到的主要问题是 jQuery Mobile 将加载页面、运行其中的脚本并触发事件的顺序。 jacob4u2.posterous.com/documentready-with-jquery-mobile 对我很有帮助。 我认为第二个链接可能有答案，但我还没有找到答案。 JS 小提琴似乎不适合我。如果您愿意，使用该框架，您是否必须链接到特定于页面的 JS 文件，例如我是否必须像 “诀窍”似乎是您必须在头部绑定一些事件（如pageinit）；否则，您最终会在事件被触发后加载页面并绑定到事件。我对以后每次发生的事件（如pagebeforeshow）进行了最成功的绑定，我必须承认 jQM 文档对事件处理的完成方式以及它如何与从传入页面，因此将我所有的 js 包含在头部似乎可以省去很多麻烦。【参考方案2】：
不确定您要完成什么，但您可以使用 javascript 循环浏览页面上的每个链接并将 onclick 设置为返回 false，但将 href 转发到 ajax 调用。 php页面会接收到请求页面的url，解析xml，返回body的内容。这可以替换第一页的正文。
【讨论】：
我在问题中添加了一些信息，以更好地布局我所问的内容。基本上我想在使用 ajax 导航时引入页面特定的 javascript【参考方案3】：我还遇到了问题。最后我使用iframe标签并添加到data-role="page"页面div中。
就像这样：
<iframe style="display:none" onload="javascript:js_fun()"></iframe>
然后js_fun() 运行。从而可以通过ajax加载js代码或文件。
【讨论】：
以上是关于有没有办法在 jquery 移动 ajax 负载上抓取 javascript的主要内容，如果未能解决你的问题，请参考以下文章
ajax调用后，jquery mobile在复选框上没有样式
有没有办法通过 jquery 选择的插件动态 ajax 添加元素？
drupal7 - 使用 ajax(jquery) 加载节点