有没有办法在jquery mobile ajax负载上抓取javascript

我知道当你用jquery mobile使用ajax切换页面时，它只会抓取data-role="page"中的DOM。问题是这是一个在移动设备上运行的phonegap应用程序，所以在不使用ajax的情况下进行整页加载非常缓慢，获取所有JS，CSS脚本。有没有办法在jquery mobile ajax负载上抓取javascript

我一直在四处寻找不同的东西。文档说你可以将javascript附加到dom中，并将它放在一个data-role="page"元素下，但我仍然无法通过这种方式启动它。

什么我目前想是有被包含在第一页的顶部和pagechange在试图插入特定于该页面中的JS在DOM

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>

那么，当我点击从索引到家的链接时，会发生什么事情，dom会更新，但任何JS o在home.html页面不会通过AJAX插入页面，所以我试图找出一个方法来做到这一点。

我知道我可以将所有的js包含在一个页面中，但我真的很想避免这种情况，因为我有很多页面，并且它会变得很乱。

来源

2012-01-21 Brian

不确定你想要完成的工作，但是你可以通过JavaScript页面上的每个链接循环，并设置onclick返回false，但将href转发给ajax调用。 PHP页面将接收请求页面的URL，解析XML并返回正文的内容。这可以替换第一页的正文。

来源

2012-01-21 00:15:06 mowwwalker

我在问题中添加了一些信息以更好地布置我所要求的内容。基本上我想在使用ajax导航时引入页面特定的javascript – Brian

请记住，当jQuery Mobile通过AJAX加载另一个页面时，它所做的只是将新页面中的<div data-role="page">插入到现有页面的<body>中。除div以外的任何内容可能不存在。所以当你拉第二页时，你想要插入的脚本实际上并不存在。

你可以做到这一点的方法是 - 将脚本包含在你的页面div中，或者将所有的javascript加载到HEAD中。你还应该注意的智慧，这一点上

http://code.jquery.com/mobile/latest/demos/docs/api/events.html

“为这些处理的初始页面加载过程中被调用，jQuery Mobile的执行之前，必须将它们绑定，这可以在mobileinit完成处理程序，如全局配置页面上所述。“

哦，还有一件事要记住......将JavaScript复制到已加载的页面中并不会真正执行它;）

来源

2012-01-21 02:26:06

即使JS被包装在pageInit事件中？ – Brian

http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml在这里似乎很有帮助。但我仍然认为你将遇到的主要问题是与订单有关，jQuery Mobile将加载页面，运行脚本并激发事件。 http://jacob4u2.posterous.com/documentready-with-jquery-mobile对我来说相当有帮助。 –

我认为第二个链接可能有答案，但我还没有完成。 JS小提琴似乎不适合我。有了这个框架，如果你愿意，你是否必须链接到特定于页面的JS文件，例如，我必须在某处放置？或者navigation.js去抓取函数？ – Brian

我遇到了问题。最后我使用iframe标签并添加到data-role="page"页面div中。

就像这样：

<iframe style="display:none" onload="javascript:js_fun()"></iframe>

那么js_fun()运行。因此可以通过ajax加载js代码或文件。

来源

2013-06-10 04:42:13 mygoare

有没有办法在jquery mobile ajax负载上抓取javascript

回答

相关问题