Jquery Mobile - $ .mobile.changepage没有加载外部.JS文件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery Mobile - $ .mobile.changepage没有加载外部.JS文件相关的知识，希望对你有一定的参考价值。
所以我很难让$.mobile.changePage正常运作。我称之为：
$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );
但由于某种原因，当加载HTML页面时，没有包含任何外部.js（我写的实际做某事的文件）。我正在遵循重要的装载惯例
-Jquery
-(CUSTOM JS)
-Jquery Mobile
有谁知道为什么没有正确加载？此外，页面显示功能也没有被解雇，这很奇怪。它看起来像这样：
$("div[data-role*='page']").live('pageshow', function(event, ui) {
loadFormFields();
});
现在页面已呈现，但没有任何功能发生。如果我破解它并做这样的事情：
document.location.href="DataformsM-AddRecord.html";
它将正常运作。
jQuery Mobile没有将整个页面拉入dom，它抓住了第一个data-role="page"元素及其后代并将其拉入当前的dom。
因此，文档的<head>中的任何脚本都不会包含在内。
我通常将我网站上的所有功能javascript放在索引页面上，然后当外部页面加载到dom中时，他们可以从已经加载的脚本中受益。
此外，您可以将JavaScript代码放在data-role="page"元素中，当jQuery Mobile对其进行AJAX加载时，它将被包含在内。
UPDATE
一个好的系统是将所有JS放入包含文件并将其包含在站点的每个页面上。如果通过AJAX将页面带入DOM，它将被忽略，但如果有人在您的站点中的某个地方刷新，则JS将可用。
因此，基于贾斯珀上面明智地提到的内容，我想出了一个有效的解决方案。
基本上我将所有JS和CSS文件加载到索引页面中以启动。现在加载时，将为pageshow触发此方法
$("div[id*='page1']").live('pageshow', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
doStuffWhenPageintializes();
});
一旦我调用$.mobile.changePage( "someOtherPage.html", { transition: "slide"} );，pagehide方法将被触发page1对象。您可以在此处触发方法来初始化要转换的页面。
$("div[id*='page1']").live('pagehide', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
loadStuffForNewPage();
});
现在您可以删除document.location.href="external.html"行并简单地使用本机JQM调用。希望这可以帮助一些人。
请重复每个html页面中所有脚本的head部分，因为更改页面将导致重新加载页面并重新创建head section ...
这样一个简单的更改页面就可以了：
$.mobile.changePage('abc.html', {
transition: 'slide'
});
似乎JQM没有提供加载外部html文件的“正确”方式。非常感谢贾斯珀的解决方案。
如果我们想切换到外部页面，JQM建议重新加载AJAX，例如：
<a href="foo.html" rel="external">
要么
<a href="foo.html" data-ajax="false">
我尝试了两种方法，但它们没有用 - 我为本机应用程序编程，所以它可能适用于网络应用程序？
我通过将脚本放在最后加载的页面的头部分来解决这个问题，这对我来说是有用的。 JQM没有获取DOM中最近加载的页面的头部，因此没有带来最近页面的JS内容。通过将所有脚本放在外部JS文件中或将其放在第一页的头部分中，可能会为您提供帮助。
我也正在寻找这个解决方案加载外部页面的“正确方法”。但是，我会同意，你的黑客确实有效。我现在要接受黑客攻击：
$(document).ready(function(){
$("#page1").bind('ended', function(){
$.mobile.changePage($(document.location.href="external.html"), 'fade');
});
});
以上是关于Jquery Mobile - $ .mobile.changepage没有加载外部.JS文件的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile仿360首页，jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页
jquery mobile，结合jquery mobile“页面”和内部页面
jQuery Mobile-jquery Mobile 怎么用ajax提交表单
Jquery Mobile - $ .mobile.changepage没有加载外部.JS文件