Question

所以我很难让$.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";

它将正常运作。

Answer 1

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

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

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

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

<强>更新

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

Answer 2

因此，基于贾斯珀上面明智地提到的内容，我想出了一个有效的解决方案。

基本上我将所有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"} );后，{1}}方法将被触发为page1对象。您可以在此处触发方法来初始化要转换的页面。

pagehide

现在您可以删除$("div[id*='page1']").live('pagehide', function(event, ui) { setTimeout(function() { window.scrollTo(0, 1) }, 100); loadStuffForNewPage(); });行并只使用本机JQM调用。希望这有助于一些人。

Answer 3

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

这样一个简单的变更页面就可以了：

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

Answer 4

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

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

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

或

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

我试过了两个但是它们没有用 - 我是为原生应用程序编程，所以它可能适用于网络应用程序？

Answer 5

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

Answer 6

我也在寻找这个解决方案，以便加载外部页面的“正确方法”。但是，我会同意，你的黑客确实有效。我现在要接受黑客攻击：

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

Jquery Mobile - $ .mobile.changepage没有加载外部.JS文件

6 个答案: