创建加载外部html文件的自定义Html标记

时间:2017-10-05 16:16:18

标签: javascript jquery html css cordova

正如可以理解的那样,我的目标是创建一个加载外部html文件的html标签。我想添加的文件包含页眉和页脚htmls,样式和脚本。我计划在Cordova上使用它。我之前看到了一个使用自定义html标签的JQuery Mobile主题,其中包含用于页眉和页脚的外部html文件。然而,我无法找到解释这一点的资源。我怎样才能做到这一点?

编辑:问题不在于包含外部html文件。它正在创建一个自定义标签,以实现这一目标。

2 个答案:

答案 0 :(得分:1)

如果您使用的是JQuery

$("#displayPage").load("page.html");

这会将HTML加载到具有id:displayPage

的元素中

此外,请参阅此答案:https://stackoverflow.com/a/20868400/4064004

使用服务器端包含您可以:

<html><head><title>Test</title></head>
<body>
    <!--#include file="navbar.shtml" -->
</body>
</html>

navbar.shtml

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>

答案 1 :(得分:0)

您可以使用iframe标记加载该html文件。但是你可能知道每个iframe都有自己的资源,所以在移动应用程序中这可能是一个陷阱 你也可以使用jquery作为

$('#selector').load('html_file.html');

这可能是一个很好的选择。

我建议您使用的第三个选项是将动态内容加载到后端代码而不是前面的代码。

我的意思是你应该在支持UI的代码中加载这些文件并将页面的各个部分组装在一起(我不知道cordoav如何工作,但这个概念是适用的)而不是在UI本身中那种情况下,你正在减慢用户界面,并使事情变得复杂。

因此,目标是一次性静态加载所有页面,并尽可能使用动态更改页面。