踩坑-iframe中父类和子类的元素和方法的调用_iframe.document.queryselector-优快云博客

本文链接：https://blog.youkuaiyun.com/Too_Soup_Soup/article/details/126867555

今天准备写个东西的时候要用到iframe，试了一下子类iframe可以获取父类的DOM,父类iframe也可以获取到子类的DOM就是无法获取子类iframe 中元素和调用方法

    //父类 
    <body>
    	<div class="">
			<a id="a1">我是父亲页面</a>    		
    	</div>
    	<iframe  id="iframe"  src="Include2.jsp"  style="display: block;">
    	
    	</iframe>
 	</body>
 	<script type="text/javascript" defer="defer">
		var iframe  =  document.getElementById("iframe");
		var a2= iframe.contentWindow.document.querySelector("#a2");
		console.log(a2);
 	</script>
--------------------------------------------------------------------
    //子类
    <script type="text/javascript" defer="defer">
 		console.log(window.parent.document.querySelector("#a1"));
 	</script>
    <body>
    	<a id="a2"> 我是子元素</a>
 	</body>

console一直出现的是这种情况

奇怪，想了很久，最后改了一下代码

   //父类 
    <body>
    	<div class="">
			<a id="a1">我是父亲页面</a>    		
    	</div>
    	<iframe  id="iframe"  src="Include2.jsp"  style="display: block;">
    	
    	</iframe>
 	</body>
 	<script type="text/javascript" defer="defer">
		window.onload =	function alas() {
			var iframe  =  document.getElementById("iframe");
			var a2= iframe.contentWindow.document.querySelector("#a2");
			console.log(a2);
		}
 	</script>
--------------------------------------------------------------------
    //子类
    <script type="text/javascript" defer="defer">
 		console.log(window.parent.document.querySelector("#a1"));
 	</script>
    <body>
    	<a id="a2"> 我是子元素</a>
 	</body>

哦！！！原来是页面没有加载过来，其实早应该知道的，但是我用了defer属性就一直没考虑加载的问题，直到现在恍然大悟。