关于如何获取iframe中的元素

最新推荐文章于 2024-11-30 09:00:00 发布

weixin_30339969

最新推荐文章于 2024-11-30 09:00:00 发布

阅读量999

点赞数

CC 4.0 BY-SA版权

文章标签：前端后端 ViewUI

原文链接：http://www.cnblogs.com/muamaker/p/7647021.html

本文探讨了在同源及非同源环境下，通过前端技术获取iframe内元素的方法，并介绍了如何利用HTML5的postMessage API实现跨域通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天研究了一下iframe中元素的获取，发现有些地方还是有点坑的。

首先：如果使用纯前端手段，是没有办法获取非同源的iframe中的元素的，后面会提到后端手段

一、同源环境

　1、首先在父页面获取iframe中的window，然后获取元素，根据window，不仅可以获取元素，还能调用里面的方法，前提是绑定在window上面

var ifW = $('#ifr')[0].contentWindow;

ifW.document.getElementsByClassName('wrap')

2、在iframe中获取父页面的window

window.parent

3、那么问题来了。这里有些人可能发现，获取元素的时候，根本获取不到，或者有时候有，有时候没有，很奇怪。。。其实呢，这是因为你引入iframe的时候，不能确定iframe是否加载完成，另外具体是iframe里面的js先执行，还是父页面的js先执行，也是个问题。既然问题找到了，那就可以给　　

ifW.document.getElementsByClassName('wrap')
这句代码加个延时，或者写在点击事件里面，等点击触发才去获取，这个时候就没有问题了

二、非同源
可以使用 HTML5的api  ， window.postMessage

在 iframe 里面，向父页面发送消息

window.top.postMessage("close",'*');

在父页面，，监听消息

window.addEventListener("message", function(event){
	var origin = event.origin || event.originalEvent.origin; 
				
}, false);

当然也可以在 iframe里面监听事件，父页面发送消息

转载于:https://www.cnblogs.com/muamaker/p/7647021.html