js iframe获取documen中的对象为空问题

一时失言乱红尘 2022-04-08 08:10 1143阅读 0赞

首先src为同源的话，父window是可以获取iframe中的元素对象的。

**通过iframe获取window、document**  
如果想获取iframe里的window或者document，可以使用   
iframe.contentWindow、iframe.contentDocument   
iframe.contentDocument=iframe.contentWindow.document，不过iframe.contentDocument在IE8及以下的版本不支持。

或者使用window.frames\[0\]/window.frames\['name'\]先或者frame的window对象，再用window.frames\[0\].document的方法获取frame的document对象

然后获取iframe中元素是这样：

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			iframe{
    				width:100%;height:800px;
    			}
    		</style>
    	</head>
    	<body>
    		<iframe src="http://192.168.100.150:8020/实验/jsonp.html" frameborder="0" id="iframe"></iframe>
    		<script type="text/javascript">
    			var i=document.getElementById("iframe");
    			console.log(i.contentWindow.document.getElementById("text").innerHTML)
    			//或者
    			console.log(i.contentDocument.getElementById("text").innerHTML)
    		</script>
    	</body>
    </html>

但我试了一下，结果获取不到，报错iframe1.html?\_\_hbt=1544149649954:16 Uncaught TypeError: Cannot read property 'innerHTML' of null at...

![20181207102919848.png][]

获取到的document中只有head和body

console.log(i.contentWindow.document)

![20181207102747950.png][]

### 解决办法： ###

原因其实是iframe加载是需要时间的，它还没加载完我就在js中直接获取对象了，所以获取为空

var i=document.getElementById("iframe");
    i.onload=function(){
    	console.log(i.contentDocument)
    	console.log(i.contentWindow.document.getElementById("text").innerHTML)
    }

让iframe加载完onload后再获取就可以正常获取到对象了

![20181207103608925.png][]

[20181207102919848.png]: /images/20220407/451e229341474e6fbf5b9702911e9b78.png
[20181207102747950.png]: /images/20220407/df42f4bd700a4ae6a6cdba2a400b1153.png
[20181207103608925.png]: /images/20220407/5584f81e930f45e19c76aa024a1ed957.png