多语言展示
当前在线:1792今日阅读:168今日分享:49

HTML Imports新特性的使用demo

HTML Imports新特性的使用demo。
工具/原料
1

chrome

2

apache/nginx/tomcat

方法/步骤
1

HTML Imports能实现什么功能?就是在html文件中,引入另一个html文件。如果你熟悉php的话,就知道require、include能引入别的文件。jsp也是有类似的导入其他文件的功能。HTML Imports用于模板功能,还是比较方便的。

2

比较简单直接上代码,准备两个文件:

3

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

4

另外附上完整的代码:【1.html】        Demo           

   
   
   
       

        chrome 版本39.0.2171.95 m测试发现,他已经支持HTML Imports 特性了。(2014-12-29)       
HTML Imports 的演示demo不要在本地文件系统直接用浏览器打开,请部署到http服务器再用浏览器访问(比如nginx、apache等)。       
本地访问,chrome会报错,因为这样import,chrome认为你跨域了。       
chrome报错信息为:       
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.   

【2.html】

推荐信息