Question

我尝试在我的索引中注入一些其他页面，例如“profile.html”或“contact.html”。对于某些页面，我想保留在内存中，用户可以返回，其他一些不要。我希望在主索引页＆lt; \ div＆gt;中加载此页面。谁能举一些代码示例？ Something like that

Answer 1

您所描述的问题，正是jquery-mobile将“页面”加载到DOM中的默认方式。

让我们建立一个例子：

的index.html

标题包含所有引用jquery，jquery-mobile等。
div with data-role =“page”＆gt; #index
div with data-role-“page”＆gt; ＃1页

page2.html

div with data-role =“page”＆gt; ＃2页

page3.html

标题包含对jQuery，jquery-mobile等的所有引用。
div with data-role =“page”＆gt; ＃page3

当我从x链接到y时会发生什么？

打开index.html
- 显示带有data-role =“page”的第一个div
- 在这种情况下#index
- DOM内部的页面（＃index，＃page1）
从index.html（#index）到＃page1的链接
- 什么都没有加载
- 显示页面＃page1
- DOM内部的页面（＃index，＃page1）
从index.html到page2.html的链接
- 来自page2.html的data-role =“page”的第一个div被加载到DOM
- DOM内部的页面（＃index，＃page1，＃page2）
- 如果你重新加载页面，你会看到一个没有样式的html页面，因为page2.html头部没有js或css文件
- 你可以链接到＃index，＃page1和＃page2因为所有这些都在DOM内部
使用data-ajax =“false”链接到page3.html
- 整个page3.html已加载。
- DOM内部的页面（＃page3）
- 仍然可以链接到page2.html
- 您也可以链接到index.html的第一页，但不能链接到第二页。

您无法加载带有ajax的多页.html文件的第一页。要加载多页，您必须加载.html文件而不使用ajax（data-ajax =“false”）

代码index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <!-- jQuery Mobile -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>

<body>
  <!-- Index -->
  <div data-role="page" id="index" data-title="index.html">
    <!-- Header -->
    <div data-role="header" data-position="fixed">
      <h1>Index.html(#index)</h1>
    </div>
    <!-- /Header -->

    <!-- Content -->
    <div role="main" class="ui-content">
      <a href="#" class="ui-btn ui-state-persist ui-btn-active">Index.html</a>
      <a href="#page1" class="ui-btn">Page 1 (intern)</a>
      <a href="page2.html" class="ui-btn">Page 2 (seperate .html file)</a>
      <a href="page3.html" data-ajax="false" class="ui-btn">Page 3 (seperate .html file - no-ajax)</a>
    </div>
    <!-- /Content -->


  </div>
  <!-- /Index -->

  <!-- page1 -->
  <div data-role="page" id="page1" data-title="index.html#page1">
    <!-- Header -->
    <div data-role="header" data-position="fixed">
      <h1>Index.html#page1</h1>
    </div>
    <!-- /Header -->

    <!-- Content -->
    <div role="main" class="ui-content">
      <a href="#index" class="ui-btn ">Index.html</a>
      <a href="#page1" class="ui-btn ui-state-persist ui-btn-active">Page 1 (intern)</a>
      <a href="page2.html" class="ui-btn">Page 2 (seperate .html file)</a>
      <a href="page3.html" data-ajax="false" class="ui-btn">Page 3 (seperate .html file - no-ajax)</a>
    </div>
    <!-- /Content -->


  </div>
  <!-- /page1 -->


</body>

</html>

page2.html的代码

<script>
  alert("hello from Page 2");
</script>




<!-- page2 -->
<div data-role="page" id="page2" data-title="page2.html">
  <!-- Header -->
  <div data-role="header" data-position="fixed">
    <h1>page2.html</h1>
  </div>
  <!-- /Header -->

  <!-- Content -->
  <div role="main" class="ui-content">
    <a href="#index" class="ui-btn ">Index.html</a>
    <a href="#page1" class="ui-btn">Page 1 (inside index.html)</a>
    <a href="page2.html" class="ui-btn ui-state-persist ui-btn-active">Page 2 (seperate .html file - ajax)</a>
    <a href="page3.html" data-ajax="false" class="ui-btn">Page 3 (seperate .html file - no-ajax)</a>
  </div>
  <!-- /Content -->

</div>
<!-- /page2 -->

page3.html的代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <!-- jQuery Mobile -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

  <script>
    alert("hello from Page 3");
  </script>


</head>

<body>

  <!-- page2 -->
  <div data-role="page" id="page3" data-title="page3.html">
    <!-- Header -->
    <div data-role="header" data-position="fixed">
      <h1>page3.html</h1>
    </div>
    <!-- /Header -->

    <!-- Content -->
    <div role="main" class="ui-content">
      <a href="index.html" class="ui-btn ">Index.html (First page of a Multipage)</a>
      <a href="index.html#page1" class="ui-btn">Page 1 ((Second page of a Multipage))</a>
      <a href="page2.html" class="ui-btn">Page 2 (seperate .html file - ajax)</a>
      <a href="page2.html" data-ajax="false" class="ui-btn ui-state-persist ui-btn-active">Page 3 (seperate .html file - no-ajax)</a>
    </div>
    <!-- /Content -->

  </div>
  <!-- /page2 -->
</body>

</html>

jQuery Mobile使用带有jquery的URL注入外部页面

1 个答案:

的index.html

page2.html

page3.html