如何在HTML中引入外部页面(HTML imports法)
发表时间:2023-08-31 来源:明辉站整理相关软件相关文章人气:
[摘要]在页面布局时,会将部分外部页面引入到HTML中,这篇文章就和大家讲讲如何在HTML中引入外部页面之HTML imports法。有需要的朋友可以参考一下,希望对你有用。HTML imports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前谷歌已经全面支持HTML import...
在页面布局时,会将部分外部页面引入到HTML中,这篇文章就和大家讲讲如何在HTML中引入外部页面之HTML imports法。有需要的朋友可以参考一下,希望对你有用。
HTML imports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前谷歌已经全面支持HTML imports,Opera35版本之后支持,但是FF依旧不支持。(在谷歌的地址栏输入:chrome://flags,启动或禁止一些功能) 。尽管目前HTML imports的兼容不是很好,但是我们还是有必要了解其使用方法,W3C已经发布了HTML imports的标准草案,相信后期应该还是会用得比较普遍的。使用HTML imports
<!doctype html>
<html>
<head>
<!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="关键词一,关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<title>Document</title>
<link rel = "import" href = "test1.html"/>
</head>
<body>
<div id = "content"></div>
</body>
</html>
<script>
var post = document.querySelector("link[rel = 'import']").import;
var con = post.querySelector("div");
document.querySelector("#content").appendChild(con.cloneNode(true));
var clone = document.importNode(con,true)
document.querySelector("#content").appendChild(clone)
</script>
给出了两种将import进来的html中我们需要的部分插入到当前html.
最后简单介绍document.querySelector和document.querySelectorAll,这两个方法是HTML5在Web API中新引入的方法,大大简化了在原生Javascript代码中选取元素。
document.querySelector和document.querySelectorAll都是接收一个字符串作为参数,这个参数需要符合CSS选择语法,即:标签、类选择器、ID选择器,属性选择器(E[type=”XX”]),结构选择器(:nth-child(n))等。不支持伪类选择器。
document.importNode(node,deep)方法把一个节点从另一个文档复制到该文档以便应用,第二个值为true,那么将该节点的所有子孙节点也复制过来。
node.cloneNode(deep):对已有的节点进行克隆,deep值为true,表示克隆其子孙节点。如果deep为false,则只克隆该节点自身。
以上就是如何在HTML中引入外部页面(HTML imports法) 的详细内容,更多请关注php中文网其它相关文章!
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。