踩坑-iframe中父类和子类的元素和方法的调用

Too_Soup_Soup

于 2022-09-15 11:22:35 发布

阅读量494

点赞数

分类专栏： HTML 文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/Too_Soup_Soup/article/details/126867555

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天准备写个东西的时候要用到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属性就一直没考虑加载的问题，直到现在恍然大悟。