javascript - 使用 JavaScript 访问 jQuery Mobile(子)页面的内容

Question

我一直在尝试使用许多“标准”JavaScript DOM 函数来访问 HTML 文档中的元素(getElementById、getElementsByName 等)，但我不能无法使用 jQuery Mobile - 当加载子页面时，从 getElementById("elementOfInterest").innerHTML 返回的值仍然包含来自母版页的值。

我正在尝试在 iPhone 应用程序中实现此功能，以在导航栏中提取和显示各个子页面的标题(该页面显示在 UIWebView 中)，但我认为(并希望)问题和解决方案或多或少是“平台独立的”。

有人想过如何使用 JavaScript(或可能是某些 jQuery 函数)实现此目的吗？不过，我在 jQuery Mobile 文档中找不到任何内容。

Answer 1

根据 jQuery Mobile 的默认行为 configuration , 它会在可能的情况下通过 Ajax 自动处理链接点击和表单提交。因此，当您打开一个新页面(子页面)时，新页面将附加到母版页的 DOM 中。在此期间，您会丢失在新页面上编写的 JavaScript。

按照我的想法，您可以禁用 Ajax 表单和链接。

为此，请编写如下链接:

<a href="createForm.htm" data-role="button" data-ajax="false">Create</a>

您还可以通过覆盖默认配置对所有链接执行此操作:

<script src="/js/jquerymobile/jquery-1.5.min.js"></script>
<script type="text/javascript">
    $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled= false;
    });
</script>
<link rel="stylesheet" href="/css/jquerymobile/jquery.mobile-1.0a3.min.css" />
<script src="/js/jquerymobile/jquery.mobile-1.0a3.min.js"></script>

在这两种方式中，痛苦是，您将失去框架生成的后退按钮!

阅读更多: http://jquerymobile.com/demos/1.0a3/#page.html&subpageidentifier

编辑:

要在新页面中添加后退按钮，您可以像这样手动放置它:

<div data-role="header">
    <a href="../list.htm" data-icon="arrow-l" data-ajax="false">Back</a>
    <h1>
        List items
    </h1>
</div>