jQuery Mobile 使用链接到 n 个 JQM“页面”的单个动态 .html 页面时出现错误
我有一个移动网站，由单个 HTML 页面 (Mobile.html) 组成。内容动态加载到 data-role="page" 的 JQM 格式的 div 中。页面上唯一的静态内容是body标签；其他所有内容都是在用户与页面交互时构建和拆除的，页面通过 Web 服务调用构建 DOM。
这一切都运作良好，但有一个重大例外。链接处理已损坏。 JQM 附加到 url 哈希后，刷新和导航就会中断。我一直在测试这个问题的各种解决方案，但到目前为止还没有一个真正有效。
使用 JQM nightly build 和 1.0A4.1，我已将问题简化为以下测试代码：
<body id='CswMobile'>
<div id="StaticPage1" data-role="page" >
<div id="StaticHeader1" data-role="header"><h1>Static Header 1</h1></div>
<div id="StaticContent1" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<div id="StaticPage2" data-role="page">
<div id="StaticHeader2" data-role="header"><h1>Static Header 2</h1></div>
<div id="StaticContent2" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#StaticPage1').live('tap', function (event) { return onClick(event); });
function onClick(event)
{
var id = $(event.target.outerHTML).attr('href');
var $page = $(id);
if ($page.length === 0) $page = makePage(id);
$page.live('tap', function (event) { return onClick(event); });
$.mobile.changePage($page, 'slide');
return false;
}
function makePage(id)
{
id = id.replace('#', '');
$('body').append('<div id="' + id + '" ' + 'data-role="page">')
var $page = $('#' + id);
$page.append('<div id="Header_' + id + '" ' + 'data-role="header"><h1>Header of ' + id + '</h1>');
var $header = $('#Header_' + id);
$page.append('<div id="Content_' + id + '" ' + 'data-role="content">');
var $content = $('#Content_' + id);
$page.append('<div id="Footer_' + id + '" ' + 'data-role="footer">');
var $li1 = $('<li><a href="#StaticPage1">Static Page 1</a></li>');
var $li2 = $('<li><a href="#StaticPage2">Static Page 2</a></li>');
var $li3 = $('<li><a href="#DynamicPageA">Dynamic Page A</a></li>');
var $li4 = $('<li><a href="#DynamicPageB">Dynamic Page B</a></li>');
var $ul = $('<ul data-role="listview" data-theme="b"></ul>').append($li1).append($li2).append($li3).append($li4);
$content.append($ul);
return $page;
}
</script>
静态内容的工作方式正如您所期望的那样，但动态内容会产生意外的行为，通常是 404 错误 (GET http://localhost/ DynamicPageA 404（未找到）），或浏览器地址栏中无效 URL 上的 JQM“正在加载...”动画 (http://localhostDynamicPageA)。
首先，如果不调用 $.mobile.changePage();，我根本无法让链接处理正常工作。此时，新内容已经在 DOM 中了——那么为什么 JQM 不能处理该链接呢？
其次，changePage() 似乎注入了它自己的怪癖。单击同一动态列表项两次会返回 404 错误。刷新动态链接上的浏览器会返回 404。
使用 JQM 的基础设施解决此问题的最简单方法是什么？
编辑：
向“页面”div 添加 data-url 属性解决了部分问题 - 链接处理现在适用于动态内容的点击；但是，后退（使用 JQM 自动生成的“后退”按钮）和刷新仍然无法正常工作。
- “后退”按钮生成以下 URL：http://localhostdynamicpagea/# 并显示以下错误：“Fiddler：DNS 查找 localhostdynamicpagea失败。没有这样的主机是已知的”。浏览器的后退工作得很好——所以我可以滚动我自己的“后退”按钮来解决这个问题。
- 动态页面上的浏览器刷新仍然会生成空屏幕，并显示以下控制台日志错误：“GET http://localhost/DynamicPageB 0 ()”。我期望此网址上的页面刷新： http://localhost/Mobile.html#DynamicPageB 刷新Mobile.html 减去动态哈希。
I have a mobile site, which consists of a single HTML page (Mobile.html). The content is loaded dynamically into JQM formatted divs of data-role="page". The only static content on the page is the body tag; everything else is built up and torn down as the user interacts with the page, which is building the DOM from web service calls.
This all works very well, with one major exception. Link handling is broken. Once JQM has appended to the url hash, refresh and navigation breaks. I have been testing various solutions to this problem, and none so far really work.
Using both JQM nightly build and 1.0A4.1, I've simplified the problem into this test code:
<body id='CswMobile'>
<div id="StaticPage1" data-role="page" >
<div id="StaticHeader1" data-role="header"><h1>Static Header 1</h1></div>
<div id="StaticContent1" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<div id="StaticPage2" data-role="page">
<div id="StaticHeader2" data-role="header"><h1>Static Header 2</h1></div>
<div id="StaticContent2" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#StaticPage1').live('tap', function (event) { return onClick(event); });
function onClick(event)
{
var id = $(event.target.outerHTML).attr('href');
var $page = $(id);
if ($page.length === 0) $page = makePage(id);
$page.live('tap', function (event) { return onClick(event); });
$.mobile.changePage($page, 'slide');
return false;
}
function makePage(id)
{
id = id.replace('#', '');
$('body').append('<div id="' + id + '" ' + 'data-role="page">')
var $page = $('#' + id);
$page.append('<div id="Header_' + id + '" ' + 'data-role="header"><h1>Header of ' + id + '</h1>');
var $header = $('#Header_' + id);
$page.append('<div id="Content_' + id + '" ' + 'data-role="content">');
var $content = $('#Content_' + id);
$page.append('<div id="Footer_' + id + '" ' + 'data-role="footer">');
var $li1 = $('<li><a href="#StaticPage1">Static Page 1</a></li>');
var $li2 = $('<li><a href="#StaticPage2">Static Page 2</a></li>');
var $li3 = $('<li><a href="#DynamicPageA">Dynamic Page A</a></li>');
var $li4 = $('<li><a href="#DynamicPageB">Dynamic Page B</a></li>');
var $ul = $('<ul data-role="listview" data-theme="b"></ul>').append($li1).append($li2).append($li3).append($li4);
$content.append($ul);
return $page;
}
</script>
The static content works just as you would expect, but the dynamic content produces unexpected behavior, typically either a 404 error (GET http://localhost/DynamicPageA 404 (Not Found)), or a JQM "Loading..." animation on an invalid URL in the browser address bar (http://localhostDynamicPageA).
First, I cannot get link handling to work at all without calling $.mobile.changePage();. By this time, the new content is already in the DOM--so why can't JQM handle the link?
Second, changePage() seems to inject its own quirks. Clicking the same dynamic list item twice returns a 404 error. Refreshing the browser on a dynamic link returns 404.
What is the simplest way to solve this problem using JQM's infrastructure?
Edit:
Adding a data-url attribute to the "page" divs solves part of the issue--link handling now works on click for dynamic content; however, back (using JQM's auto-generated 'Back' button) and refresh are still broken.
- The 'Back' button generates this URL: http://localhostdynamicpagea/# with this error: "Fiddler: DNS Lookup for localhostdynamicpagea failed. No such host is known". The browser's Back works just fine--so I may just roll my own 'Back' button to solve this.
- Browser Refresh on a Dynamic page still generates an empty screen with this console log error: "GET http://localhost/DynamicPageB 0 ()". I would expect a page refresh on this url: http://localhost/Mobile.html#DynamicPageB to refresh Mobile.html less the dynamic hash.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
虽然我最终能够让示例代码按预期工作，但在尝试在移动应用程序中实现时，我再次遇到了问题 - 因为我是根据 AJAX 调用的结果生成所有内容。这提出了 JQM 的竞争条件，它异步解析 DOM：我几乎总是在调用 .page() 之前重定向到新的“页面”。
幸运的是，我发现了这个： http://www.a2zdotnet.com/m/ #view.htm?id=196
现在实施每个站点的建议。
While I was eventually able to get my sample code to work as expected, I again ran into problems when trying to implement in my mobile app--as I am generating all of my content based on the results of AJAX calls. This presents a race-condition with JQM, which is asynchronously parsing the DOM: I nearly always redirect to the new "page" before .page() has been called.
Fortunately, I found this: http://www.a2zdotnet.com/m/#view.htm?id=196
Implementing per site suggestions now.