jdk8新特性 demo HTML Imports新特性的使用demo

HTML Imports新特性的使用demo――简介

HTML Imports新特性的使用demo。

HTML Imports新特性的使用demo――工具/原料
chromeapache/nginx/tomcatHTML Imports新特性的使用demo――方法/步骤

HTML Imports新特性的使用demo 1、

HTML Imports能实现什么功能?

就是在html文件中,引入另一个html文件。

如果你熟悉php的话,就知道require、include能引入别的文件。

jsp也是有类似的导入其他文件的功能。

HTML Imports用于模板功能,还是比较方便的。


HTML Imports新特性的使用demo 2、

比较简单直接上代码,

准备两个文件:


HTML Imports新特性的使用demo 3、

部署到http服务器上,浏览器访问,就可以看到效果了。如图:


HTML Imports新特性的使用demo 4、

另外附上完整的代码:

【1.html】

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Demo</title>

<!-- HTML Imports -->

<link href="2.html" rel="import" />

</head>

<body>

<div id="container">

</div>

<div id="container2">

</div>

<script>

// 在javascript中调用HTML Imports的内容:

var post = document.querySelector('link[rel="import"]').import;

console.log(post.body.innerHTML) //能输出对应的html

document.querySelector('#container').appendChild(post.querySelector('.header'));

jdk8新特性 demo HTML Imports新特性的使用demo

// document.querySelector('#container2').innerHTML=post.body.innerHTML;

// console.log(post)

console.log(post.body.innerHTML) //不能输出对应的html了,仅仅输出一部分

//HTML Imports 貌似有这样的特性:如果你已经把对应的html拼接到别的节点了,那个这个对象上就会删除已经被使用的节点

</script>

<p>

chrome 版本39.0.2171.95 m测试发现,他已经支持HTML Imports 特性了。(2014-12-29)

<br> HTML Imports 的演示demo不要在本地文件系统直接用浏览器打开,请部署到http服务器再用浏览器访问(比如nginx、apache等)。

<br> 本地访问,chrome会报错,因为这样import,chrome认为你跨域了。

<br> chrome报错信息为:

<br> Imported resource from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.

</p>

</body>

</html>

【2.html】

<div class="header">

<ul style="list-style=none;">

<li ><a href="###">导航1</a></li>

<li ><a href="###">导航2</a></li>

<li ><a href="###">导航3</a></li>

</ul>

</div>

<div class="test">

</div>

  

爱华网本文地址 » http://www.aihuau.com/a/8104250103/221583.html

更多阅读

iphone4s的使用教程 新iphone4s使用教程

iphone4s的使用教程——简介iphone4s的使用教程iphone4s的使用教程——方法/步骤iphone4s的使用教程 1、iphone4s使用前需要先安装iTunes,安装很简单,按照提示一步一步进行即可。安装完毕后,当iPhone4s通过USB线连接到电脑时,iTunes就

新装修的房子甲醛超标怎么办? 新装修房子怎么除甲醛

大家都知道,新房子装修后房间内的甲醛都会超标,然而甲醛对人体的伤害是非常大的,那么房间有甲醛怎么办呢?新装修的房子甲醛超标怎么办?——常见甲醛去除方法新装修的房子甲醛超标怎么办? 1、保持室内空气流通;保持居家清洁干爽,避免使用

磷化材料特性与使用方法 磷化铝的使用方法

磷化材料特性与使用方法金属氧化物氧化锌白色粉末,相对分子量81.38。极难溶于水。乙醇。溶于酸和碱。为两性金属氧化物。氧化锌品种不同,用途各异。质量差的氧化锌含有很多的石墨粉,滑石粉,氧化铜等杂质,会造成磷化膜表面形成一层光亮

转载 新砚台如何使用 砚台的使用

原文地址:新砚台如何使用作者:瞒天过海砚台的使用方法平时储水:  砚也需要滋润,平时需要每日换清水贮之,砚池不宜缺水,以前的人叫做「养研」。  使用须换清水:  可别偷懒直接以养砚研水磨墨,也别以为用茶、糖水磨出来的墨会「别有特

声明:《jdk8新特性 demo HTML Imports新特性的使用demo》为网友爱却在云里分享!如侵犯到您的合法权益请联系我们删除