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＆amp; module_b如下......

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

...和module_b相同

这两个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

这应该有效：

将每个模块放在自己的文件中。
修改模块的链接，以便链接到模块文件。
使用<iframe>标记替换原始文件中的模块。
将onclick事件处理程序添加到每个链接，该链接将src的{{1}}属性设置为模块文件的URL（并返回<iframe>，以便链接没有遵循）。

但是，如果您使用AJAX as suggested by @ThomasClayson，那么您可以使用加载的HTML做更多的工作。

Answer 3

你试过AJAX吗？

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

从我如何理解这个问题，这将解决你的问题..希望它有所帮助

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

3 个答案: