`
2008winstar
  • 浏览: 57795 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke： 写的很好，也可以看看那这个文章，我感觉学的还可以。http:/ ...
    HTML

HTML import

阅读更多

<link rel="import" href="">

1、使用link标签导入

2、link标签的rel属性值为import

3、link标签的href属性值为需要导入的资源

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <link rel="import" href="imports/myimport.html">
    </head>
    <body>
        <p>This is a import demo</p>
    </body>
</html>

 

 

import关键字给资源提供的默认类型是text/html

该link标签还有一个async属性，其值为布尔类型

该link标签不依赖media属性（media属性不生效）

 

可以在JavaScript中获取到import的属性，如

var link = document.querySelector('link[rel=import]');
var heart = link.import;
var pulse = heart.querySelector('div.pulse');

 

返回的import为被引入的文档的document对象。

 

如果通过JavaScript脚本创建link import标签，可以通过onload或onerror事件监听其是否加载成功或失败，如

var link = document.createElement('link');
link.rel = 'import';
link.href = 'myimport.html';
document.head.appendChild(link);
alert(link.import) // null，因为import的内容是异步载入，需要通过下面的onload来处理
link.onload = function(){};
link.onerror = function(){};

 

 虽然，返回的import为document对象，但导入的document不能使用document.open()，document.write()，document.close()方法，使用这些方法会抛出InvalidStateError异常。

 

由于是document对象，可以使用document.head.innerHTML;document.body.innerHTML;document.querySelector()

 

被导入的html文档中也隐含着head和body，其中导入其它文档（如果有的话）的link标签会出现在document.head中，其余的会出现在document.body中。

 

在被导入的html文档中的document指的是主文档的document；

在被导入的html文档中，可以通过document.currentScript.ownerDocument来获取当前（即被导入文档自身）的document

 

将被导入html文档的内容加到主文档的示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="import" href="imports/myimport.html">
</head>
<body>
    <script>
        var link = document.querySelector('link[rel="import"]');
        document.body.appendChild(link.import.body.querySelector('p').cloneNode(true));
    </script>
</body>
</html>

 

 浏览器的网络协议栈（network stack）会对访问相同URL的请求自动去重。这意味着从同一个URL导入的内容只会被获取一次。无论这个地址被导入多少次，最终它将只执行一次。

 

特性检测：

function supportImports() {
    return 'import' in document.createElement('link');
}

 

 

 

 

分享到：
| CSS兼容性问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics