如何将HTML5页面加载到我的HTML5页面？

Question

我正在用HTML5做一个简单的静态应用程序。

我现在所做的是，我有一个很长的页面，其中有数千行代码。

我现在这样做是为了转到另一个页面：

<div data-role="content">
    <label for="heading">History</label>
    <a href="#module_a" data-role="button" data-icon="arrow-r" data-iconpos="right" data-transition="flip">History</a>
    <a href="module_b" data-role="button" data-icon="arrow-r" data-iconpos="right">Remote Control</a>
</div>

然后我有module_a & module_b，如下所示…

<div id="module_a" data-role="page">
    //content
</div>

与module_b相同的...and

这两个div都在同一个页面上，所以我的页面看起来很糟糕。

我想要的是，我需要相同的功能，但我不希望我的div，即module_a和module_b在同一个页面中。

我想为它创建不同的页面，然后加载它，这样我的主页看起来就清晰了。

Answer 1

如果我没弄错你问的是什么，你想要AJAX。当您单击其中一个链接/按钮时，您需要一个javascript代码，它将发送一个请求，以获取另一个页面的HTML并将其加载到页面上的适当位置。

最好的方法是使用jQuery。它有一个非常有用的函数，叫做load()，它能做你需要的事情。http://api.jquery.com/load/

它看起来是这样的：

$('#containerWhereYouWantTheContentToLoad').load('http://url.to/content/you/want/to/load.html');

希望这能有所帮助。

Answer 2

这应该是可行的：

1. 将每个模块放在各自的文件中。
2. 修改指向模块的链接，使其链接到模块文件。
3. 使用<iframe>标记替换原始文件中的模块。
4. 将D9事件处理程序添加到每个链接，该事件处理程序将D11的D10属性设置到模块文件的URL中(并返回D12，以便不会跟踪该链接)。H213G214

但是，如果使用AJAX as suggested by @ThomasClayson，则可以使用加载的超文本标记语言进行更多操作。

Answer 3

你尝试过AJAX吗？

 $.ajax({
   url: 'seperate_page.html',
   success: function(data) {
     $('#module_b').html(data);
   }
 });

根据我对这个问题的理解，这将解决你的问题。希望能有所帮助