1

我有一个移动网站，它由一个 HTML 页面 (Mobile.html) 组成。内容被动态加载到 JQM 格式的data-role="page". 页面上唯一的静态内容是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 (Not Found)）或 JQM“正在加载...”动画浏览器地址栏中的 URL 无效 (http://localhostDynamicPageA)。

首先，如果不调用$.mobile.changePage();. 此时，新内容已经在 DOM 中了——那么为什么 JQM 不能处理链接呢？

其次，changePage() 似乎注入了自己的怪癖。单击同一动态列表项两次会返回 404 错误。在动态链接上刷新浏览器会返回 404。

使用 JQM 的基础架构解决此问题的最简单方法是什么？

编辑：

将 data-url 属性添加到“页面”div 解决了部分问题——链接处理现在可以在点击动态内容时工作；但是，返回（使用 JQM 的自动生成的“返回”按钮）和刷新仍然被破坏。

  1. “后退”按钮生成此 URL：http://localhostdynamicpagea/#并出现以下错误：“Fiddler：DNS 查找 localhostdynamicpagea 失败。不知道这样的主机”。浏览器的后退工作得很好——所以我可以滚动我自己的“后退”按钮来解决这个问题。
  2. 动态页面上的浏览器刷新仍会生成一个空白屏幕，并显示此控制台日志错误：“GET http://localhost/DynamicPageB 0 ()”。我希望在此 url 上刷新页面：http://localhost/Mobile.html#DynamicPageB以刷新 Mobile.html 减去动态哈希。
4

1 回答 1

0

虽然我最终能够让我的示例代码按预期工作，但我在尝试在我的移动应用程序中实现时再次遇到了问题——因为我正在根据 AJAX 调用的结果生成我的所有内容。这呈现了 JQM 的竞争条件，它异步解析 DOM：我几乎总是在调用 .page() 之前重定向到新的“页面”。

幸运的是，我发现了这个：http ://www.a2zdotnet.com/m/#view.htm?id=196

现在实施每个站点的建议。

于 2011-05-20T02:04:27.097 回答