jQuery Mobile 应用程序中同时显示的所有页面
Posted
技术标签:
【中文标题】jQuery Mobile 应用程序中同时显示的所有页面【英文标题】：All pages displaying at once in jQuery Mobile app 【发布时间】：2018-04-05 16:37:29 【问题描述】：我有一个为 ios 构建的相当简单的移动应用程序，我正在尝试更新它。它是几年前在旧版本的 jQuery 和 jQuery Mobile 上创建的。确切地说是 jQuery 2.1.0 和 jQuery Mobile 1.4.2。
我现在拥有这两个版本的最新版本（或者至少在我几周前开始这个项目时它们是最新版本）：jQuery 3.2.1 和 jQuery Mobile 1.4.5。我目前几天无法解决的问题是所有页面同时显示，而 jQuery Mobile 一次应该只显示一个。我看过这篇较旧的帖子，但解决方案是使用更新版本的 jQuery。我不认为这对我来说是个问题，因为我使用了最新版本的 jQuery 和 jQuery Mobile。
All pages are visible in multi page template in jquery mobile
我在下面发布了我的代码，删除了多余的行，例如 css 包含和一些 javascript 包含。我还删除了每个页面的内容以及页脚中的图像和徽标等。 force.js 用于与名为 Salesforce 的数据库服务进行通信，并且工作正常。它为我提供了 force.login() 函数，该函数使用户登录，然后在成功时运行一个函数。 我已经在我的代码中插入了几个警报，这样我就可以看到哪里出了问题。我看到每个警报，直到 pagecontainer("change") 行。在该行之后我没有收到“页面更改”警报，所以我假设页面更改代码是我出错的地方。我尝试使用指向#mainpage 的直接链接，但这只是将我向下滚动到页面上的那个部分，所有内容仍然同时显示。
<a href="#mainpage">to main page</a>
我还尝试为主页创建第二个 html 文件并尝试切换到该文件。当我尝试这样做时，我根本没有收到任何警报，并且仍然在一页上看到所有内容。无论如何我都不想使用多个文件，因为整个应用程序已经在一个文件中构建了所有页面，所以我没有很远地追求这个想法。
我认为值得一提的是，旧应用使用了不同的功能来更改页面。
$.mobile.changePage( "#mainpage" , reverse: false, changeHash: true );
这很好用，旧版本的应用程序功能齐全，但这个 changePage 功能现在已弃用，因此将其更改为新版本是我做的第一件事。而且我尝试过使用已弃用的函数，但它根本不起作用 - 就像当前函数一样。
我还应该提到这是一个科尔多瓦应用程序，它是从命令行构建的。我从头开始重新制作了应用程序，然后将旧的 index.html 文件移到其中并一直在尝试更新它。
我希望有人能指出我做错了什么，或者至少为我指出正确的方向，让应用程序再次运行。如何让这些页面一次显示一个？
<!DOCTYPE html>
<html>
<head>
<meta name=“format-detection” content=“telephone=no” />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- include jquery mobile -->
<script src="jQuery/jquery-3.2.1.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<!-- Include cordova & forceios. -->
<script src="cordova.js"></script>
<script src="force.js"></script>
<script src="index.js"></script>
<script>
$(document).ready(function()
alert("onLoad: jquery ready");
document.addEventListener("deviceready", onDeviceReady,false);
alert("onLoad: deviceready");
);
function onDeviceReady()
force.login(function()
alert("auth succeeded");
//enable buttons
addClickListeners();
alert("buttons setup. Trying to change page now.");
//try to change page
$(":mobile-pagecontainer").pagecontainer("change", $("#mainpage"));
alert("page changed");
,
function(error)
alert("Auth failed: " + error);
);
</script>
</head>
<body>
<!-- Login Page -->
<div data-role="page" data-control-title="Login" data-theme="a" id="loginpage">
<div data-theme="a" data-role="header">
<h3>
Logging in...
</h3>
</div>
<div data-role="content">
</div>
<div data-theme="c" data-role="footer" data-position="fixed">
</div>
</div>
<!-- end of Login Page -->
<!-- main page -->
<div data-role="page" data-control-title="Actions" data-theme="a" id="mainpage">
<div data-theme="a" data-role="header">
<h3>
</h3>
</div>
<div data-role="content">
</div>
<div data-theme="c" data-role="footer" data-position="fixed">
</div>
</div>
<!-- end of main page -->
</body>
</html>
【问题讨论】：
看这里：***.com/a/44910517/4845566 @deblocker 你是我的英雄。留下答案，我会将其标记为已接受，以便为您提供一些互联网积分。 【参考方案1】：解决方法很简单，使用JQuery lib时，不要使用CDN，只需在本地添加.js和.css文件并使用，这样就可以解决问题了。它对我有用。
【讨论】：
以上是关于jQuery Mobile 应用程序中同时显示的所有页面的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Backbone.js 在 changePage 后显示 JQuery Mobile 主页面
在 jQuery Mobile 中的 Ajax 调用中显示页面加载微调器
如何控制在导航栏中显示的jquery mobile中的url