document.importNode方法作用是:将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中。
var node = document.importNode(externalNode, deep);
node: 导入当前文档的新节点,新节点的parentNode是null,因为它还没有插入到当前文档的文档树中,属于游离状态
externalNode:将要从外部文档导入的节点
deep(可选):true | false,表明是否要导入节点的后代节点,默认true
注意: 在DOM4规范中 (实现于Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)) ,deep 是个可选的参数. 如果省略不写,则使用默认值 true, 表示深度克隆. 如果你想使用浅克隆,则传入false参数.在没有实现DOM4的浏览器中, 这个参数不可以省略.
在这里,源节点不会从外部文档中删除,被导入的节点是源节点的一个拷贝
var node = document.adoptNode(externalNode);
node: 导入当前文档的新节点,新节点的parentNode是null,因为它还没有插入到当前文档的文档树中,属于游离状态
externalNode:将要从外部文档导入的节点
示例:
//adoptNode.html
<!DOCTYPE html>
<html>
<head>
<title>adoptNode</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
<button id="move">移动元素</button>
<script type="text/javascript">
//getEle 用来从本文档的第一个iframe中获取第一个element元素并插入到文档树中
function getEle() {
var iframe = document.getElementsByTagName("iframe")[0],
ele = iframe.contentWindow.document.body.firstElementChild
if(ele) {
document.body.appendChild(document.adoptNode(ele))
} else {
alert(‘没有更多元素啦‘)
}
}
document.getElementById(‘move‘).onclick = getEle
</script>
</body>
</html>
//iframe.html
<!DOCTYPE html>
<html>
<head>
<title>iframe.html</title>
</head>
<body>
<h1>Hello Dange</h1>
<h3>你好!丹哥</h3>
</body>
</html>
由于这里是用js操作iframe,直接在浏览器打开文件,点击按钮之后会报错:Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
原因:在不同端口号下,不能使用传统的iframe嵌套调用方法。同源安全策略:能用javascript访问一个iframe,如果你能做到这一点,那将是一个巨大的安全缺陷。对于同一源策略浏览器,阻止脚本尝试访问具有不同源的帧。
如果要访问iframe,协议、主机名和端口必须与域相同。
//server.js
var http = require(‘http‘);
var fs = require(‘fs‘);
//需要访问的文件存放目录
var documentRoot = ‘D:/Users/dandanhu/Desktop/adoptNode‘;
var server = http.createServer(function(req, res) {
var url = req.url; //客户端输入的url,例如如果输入localhost:8888/index.html;那么这里的url == /index.html
var file = documentRoot + url;
console.log(file)
fs.readFile(file, function(err, data) {
/*
readFile
一参为文件路径
二参为回调函数
回调函数的一参为读取错误返回的信息,返回空就没有错误
二参为读取成功返回的文本内容
*/
if(err) {
res.writeHeader(404, {
‘content-type‘ : ‘text/html;charset="utf-8"‘
});
res.write(‘<h1>404错误</h1><p>你要找的页面不存在</p>‘)
res.end()
} else {
res.writeHeader(200, {
‘content-type‘ : ‘text/html;charset="utf-8"‘
});
res.write(data);//将index.html显示在客户端
res.end();
}
})
}).listen(8888);
console.log(‘服务器开启成功‘);
在当前目录下打开命令行工具,输入 node server
启动服务器
浏览器中输入http://localhost:8888/adoptNode.html
就可以看到点击按钮,iframe中的内容移到外面啦~~~
[document][DOM]document.importNode 与 document.adoptNode
原文:https://www.cnblogs.com/danker/p/12618719.html