javascript - 如何将 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 也是如此

两个 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');

希望对您有所帮助。