Jquery Mobile - $.mobile.changepage 不加载外部 .JS 文件答案

【问题标题】：Jquery Mobile - $.mobile.changepage not loading external .JS filesJquery Mobile - $.mobile.changepage 不加载外部 .JS 文件
【发布时间】：2011-09-16 19:23:31
【问题描述】：

所以我很难让$.mobile.changePage 正常运行。我这样称呼它：

$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );

但由于某种原因，当加载 HTML 页面时，没有包含任何外部 .js（我编写的实际执行某些操作的文件）。我遵循

的重要加载约定

-Jquery
-(CUSTOM JS)
-Jquery Mobile

有谁知道为什么没有正确加载？此外，pageshow 函数也没有被触发，这很奇怪。它看起来像这样：

$("div[data-role*='page']").live('pageshow', function(event, ui) { 

    loadFormFields();

});

现在页面已呈现，但没有发生任何功能性事情。如果我破解它并做这样的事情：

document.location.href="DataformsM-AddRecord.html";

它将正常运行。

【问题讨论】：

标签： javascript jquery html jquery-mobile

【解决方案1】：

jQuery Mobile 不会将整个页面拉入 dom，它会抓取 first data-role="page" 元素及其后代并将其拉入当前 dom。

因此不会包含文档<head> 中的任何脚本。

我通常将我网站的所有功能 JavaScript 放在索引页面上，然后当外部页面加载到 dom 中时，它们可以从已经加载的脚本中受益。

此外，您可以将 JavaScript 代码放置在 data-role="page" 元素中，当 jQuery Mobile 进行页面的 AJAX 加载时，它将被包含在内。

更新

一个好的系统是把你所有的 JS 放到一个包含文件中，并将它包含在网站的每个页面上。如果通过 AJAX 将页面引入 DOM，它将被忽略，但如果有人刷新您站点中的某个位置，则 JS 将可用。

【讨论】：

这实际上完成了加载外部 JS 文件的技巧。我将写一个补充答案，以进一步解释我为使其 100% 工作所做的工作。我仍然觉得这是一个 hack，但到目前为止，它看起来不错。
@Jaspar 响应您的“更新”，有没有办法创建一个通用包含文件，包含您的所有 CSS 和 Javascript 包含？谢谢
@Derek 您可以在服务器端包含一个同时包含 CSS 和 JS 的文件。但是使用<link /> 和<script /> 标签将外部CSS 和JS 放在每个文档上非常容易。

【解决方案2】：

因此，在 Jasper 上面如此明智地指出的基础上，我想出了一个可行的解决方案。

基本上我将我所有的 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 调用。希望这对某些人有所帮助。

【讨论】：

您还可以对加载的每个页面使用 pageInit()。

【解决方案3】：

请用每个html页面中的所有脚本重复head部分，因为更改页面会导致页面重新加载并重新创建head部分...

这样一个简单的更改页面就可以工作了：

$.mobile.changePage('abc.html', {
    transition: 'slide'
});

【讨论】：

【解决方案4】：

JQM 似乎没有提供加载外部 html 文件的“正确”方式。非常感谢 Jasper 的解决方案。

如果我们想切换到外部页面，JQM 建议重新加载 AJAX，例如：

<a href="foo.html" rel="external">

或

<a href="foo.html" data-ajax="false">

我尝试了这两种方法，但它们都不起作用 - 我正在为本地应用程序编程，所以它可能适用于网络应用程序？

【讨论】：

【解决方案5】：

我通过将脚本放在对我有帮助并为我工作的最后加载页面的头部部分解决了这个问题。 JQM 没有在 DOM 中获取最近加载页面的 head 部分，因此没有带来最近页面的 JS 内容。通过将所有脚本放在外部 JS 文件中或将其放在第一页的头部可能会为您解决问题。

【讨论】：

【解决方案6】：

我也在寻找加载外部页面的“正确方法”这个解决方案。但是，我同意，您的 hack 确实有效。我现在就来破解一下：

    $(document).ready(function(){
    $("#page1").bind('ended', function(){
        $.mobile.changePage($(document.location.href="external.html"), 'fade');
  });
});

【讨论】：

当你这样做时，这是否真的进行了过渡？
因为我的页面正在加载，但我在 JQM 文件中收到 toPage.data("page") is undefined 错误。我觉得少了点什么……
请查看我根据上面 Jasper 的回答发布的解决方案。
不，过渡不起作用。我正试图解决那个问题。它可能与 $(document).ready.(function) 有关，因为我已经读过 JQM 应该避免这种情况。
我发现过渡确实有效，只是在 FF 中不行。出于某种原因，它不喜欢过渡。在其他浏览器上尝试。 :)