[document][DOM]document.importNode 与 document.adoptNode

document.importNode

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的浏览器中, 这个参数不可以省略.

在这里，源节点不会从外部文档中删除，被导入的节点是源节点的一个拷贝

document.adoptNode

语法

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，协议、主机名和端口必须与域相同。

示例运行方法--建立本地Node服务器访问文件

//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

document.importNode

语法

document.adoptNode

语法

示例运行方法--建立本地Node服务器访问文件

猜你喜欢