iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件

已于 2023-12-26 11:06:08 修改
阅读量3.9k 收藏 23
点赞数 18
文章标签： javascript 前端 开发语言
于 2023-12-26 11:02:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44434938/article/details/135206039
版权

提示：

文章目录

前言

需求：点击页面非弹窗区域，关闭弹窗，

问题：全局添加点击监听事件window.addEventListener(‘click’,()=>{console.log(‘点击页面！’)});，无法监听iframe被点击。

方案1：给iframe添加addEventListener
失败原因：无效

	let TestIframe = document.getElementById('TestIframe');
    TestIframe.addEventListener('click',()=>{console.log('iframe点击！')});

方案2：给iframe.contentDocument添加addEventListener
失败原因：谷歌浏览器更新后，无法获取iframe.contentWindow和iframe.contentDocument

	let TestIframe = document.getElementById('TestIframe');
    TestIframe.contentWindow.addEventListener('click',()=>{console.log('contentWindow点击！')});

在这里插入图片描述
方案3：使用postMessage
缺点：1、每个iframe都需要添加postMessage，2、部分iframe嵌套外部项目，无法进行postMessage添加。

方案4：监听iframe是否为当前document的activeElement，activeElement 属性返回文档中当前获得焦点的元素。
解决方案：通过全局点击事件监听和iftame监听activeElement，可实现页面点击监听

示例未作单独处理，正常情况下，打开弹窗，开启定时器setInterval，关闭弹窗，清除定时器clearInterval。

一、全局点击事件，无法监听iframe被点击。

浏览器同源策略，不然会报错
在这里插入图片描述
a.html

	<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		    <title>a</title>
		    <style>
		        .a_box{
		            height: 600px;
		            width: 600px;
		            background-color: #f00;
		            position: relative;
		        }
		        .a_inner{
		            position: absolute;
		            top: 50px;
		            left: 50px;
		            height: 500px;
		            width: 500px;
		            background: #000;
		        }
		    </style>
		</head>
		<body>
		    <div class="a_box">
		        <div class="a_inner">
		            <iframe id="TestIframe" height="100%" width="100%" src="http://127.0.0.1:5500//b.html" frameborder="0"></iframe>
		        </div>
		    </div>
		    <script>
		        window.addEventListener('click',()=>{console.log('点击页面！')});
		    </script>
		</body>
		</html>

b.html

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>b</title>
    <style>
        .b_box{
            height: 400px;
            width: 400px;
            background-color: #ff0;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div id="bBox" class="b_box"></div>
</body>
</html>

二、解决方案

1、a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a</title>
    <style>
        .a_box{
            height: 600px;
            width: 600px;
            background-color: #f00;
            position: relative;
        }
        .a_inner{
            position: absolute;
            top: 50px;
            left: 50px;
            height: 500px;
            width: 500px;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="a_box">
        <div class="a_inner">
            <iframe id="TestIframe" height="100%" width="100%" src="http://127.0.0.1:5500/b.html" frameborder="0"></iframe>
        </div>
    </div>
    <script>
        window.addEventListener('click',()=>{console.log('点击页面！')});
        let activeElement;
        let iframeCheckTimer = setInterval(()=>{
            if (document.activeElement) {
                if(activeElement==document.activeElement)return
                activeElement=document.activeElement;
                if(activeElement&&activeElement.tagName=='IFRAME'){
                    console.log('iframe被激活');
                }
            }
        },200);
    </script>
</body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>b</title>
    <style>
        .b_box{
            height: 400px;
            width: 400px;
            background-color: #ff0;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div id="bBox" class="b_box"></div>
</body>
</html>

点击黑色iframe区域（包括黄色区域），触发iframe监听console.log(‘iframe被激活’)
在这里插入图片描述
点击iframe以为区域（除黑色和黄色），触发全局监听console.log(‘点击页面！’)
在这里插入图片描述

三、试错过程

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a</title>
    <style>
        .a_box{
            height: 600px;
            width: 600px;
            background-color: #f00;
            position: relative;
        }
        .a_inner{
            position: absolute;
            top: 50px;
            left: 50px;
            height: 500px;
            width: 500px;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="a_box">
        <div class="a_inner">
            <iframe id="TestIframe" height="100%" width="100%" src="http://127.0.0.1:5500//b.html" frameborder="0"></iframe>
        </div>
    </div>
    <script>
        let TestIframe = document.getElementById('TestIframe');
        TestIframe.onload = ()=>{
            let contentDocument = TestIframe.contentDocument;
            let bBox = contentDocument.getElementById('bBox');
            bBox.addEventListener('click',()=>{console.log('xxxxxxxxxxxxxxx')})
            console.log(bBox);
        }
    </script>
</body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>b</title>
    <style>
        .b_box{
            height: 400px;
            width: 400px;
            background-color: #ff0;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div id="bBox" class="b_box"></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
平平无奇的获取iframe内元素，添加点击事件，完美~~
在这里插入图片描述
在这里插入图片描述
但是，但是，但是，在其他版本的谷歌，@_@报错了~~
在这里插入图片描述

总结

踩坑路漫漫长@~@

longlongago~~
关注
  • 18
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
devicemotion 或者 deviceorientation在window.addEventListener 事件中不生效，没有输出内容
右边疯子_的博客
05-29 384
问题：devicemotion 或者 deviceorientation 在window.addEventListener 事件中不生效，没有输出内容。2、必须用户手动点击click事件中调用。1、必须在Https协议下才可使用。
Vue项目中 使用 Iframe子页面 给 Vue父级页面传数据（js清除 addEventListener监听事件）
weixin_44647098的博客
12-29 567
【代码】Vue项目中 使用 Iframe子页面 给 Vue父级页面传数据（js清除 addEventListener监听事件）
iframe的使用和 contentWindow、parent以及postMessage通信方式
weixin_50367873的博客
12-03 2771
问题： 如何进行消息通信（父发给子，子接收父的消息，也可父直接调用子的方法； 子发给父，父接收子的消息；） 如何找到指定的子或者父window（如果iframe层级过多），又如何在发送消息时不影响其他的message监听 一、iframe的使用 <iframe style={{border:0,width:"100%",height:630,}} src={src} /> 如何进行消息通信（父发给子，子接收父的消息； 子发给父，父接收子的消息） 方法一： 直接通过获取父或者子的
解决Iframe交互事件window.addEventListener触发多次问题
weixin_42125732的博客
03-24 1万+
解决addEventListener触发多次问题
iframe监听鼠标点击事件
热门推荐
sxqlmc000的博客
04-25 1万+
iframe监听鼠标点击事件需要实现的页面逻辑是： 1. 点击父窗体中按钮，显示侧边栏； 2. 点击页面其他区域（iframe）可以隐藏侧边栏先构造页面文档结构：<html> <body> <aside id="sidebar"> <%--这是需要隐藏的侧边栏--%> </aside> <button><%--点击按
iframe.contentWindow
山水子农
09-15 4876
1、iframe.contentWindow(主页面调用iframe)  此处的iframe是从document取得的，即作作为document的子对象出现，虽然是文档(document)对象，但由于它是独立的页面，因而拥有自己的事件，拥有自己的窗口对象(contentWindow)；contentWindow属性是指指定的frame或者iframe所在的window对象。 在IE中iframe
父级页面监听iframe点击事件
PGD_607的博客
12-09 5385
通过contentDocument属性 定义和用法： contentDocument 属性以 HTML 对象返回框架容纳的文档。 语法：frameObject.contentDocument html: <iframe id="iframe" frameborder=0 scrolling="no"></iframe> 父级页面js: document.getEleme...
javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,...
weixin_34112900的博客
11-13 1399
javascript获取iframe框架中，加载的页面document对象 因为浏览器安全限制，对跨域访问的页面，其document对象无法读取、设置属性        function getDocument(iframe)         {             var Doc;             try{                 Doc = iframe.contentWi...
给iframe标签添加点击事件方法
u010022260的博客
01-13 7797
今天遇到一个需求，通过iframe标签引入其它页面（当前页面为a.html，被引入页面为b.html)，在b页面当中，点击一个事件之后，需要让a页面某个元素消失，但试了很多次，iframe事件无法添加，最终还是网友的力量强大，找到了两个方法，如果其它网友还有更好的办法，可以留言给我。 我找到两个方法，我全贴下面 <!DOCTYPE html> <html> <he...
使用window.postMessage()时，window.addEventListener()不能成功监听到消息。
qq_38643387的博客
03-04 6356
使用window.postMessage()时，window.addEventListener()不能成功监听到消息。 尝试使用以下方法： 父： <iframe src='../helloWord.html'> <script> window.addEventListener('message',function(e){ //代码 },false); <script> //iframe方式打开子页面 子： targetWin = window.par
捕捉IFrame SRC改变事件
04-30
页面中的使用到Iframe时，我们如何需要对IFrame中页面是否改变进行判断，我们可以使用到window.onbeforeunload事件.
从父级获取或设置iFrame中控件的值
04-07
如果iFrame加载的是同源的页面（即协议、域名和端口都相同），则可以直接使用`contentWindow`来访问其JavaScript全局对象，进一步操作DOM和获取/设置控件的值。例如： ```javascript var iframe = document....
iframe根据页面内容自适应高度和宽度
09-03
可以监听`load`事件，当`iframe`加载完成后，通过`contentWindow`和`contentDocument`属性获取内容的尺寸，然后调整`iframe`的大小。例如： ```javascript document.getElementById('myIframe').addEventListener('...
javascript firefox 自动加载iframe 自动调整高宽示例
12-02
在JavaScript中，`iframe...通过`contentWindow`和`contentDocument`属性获取`iframe`内容的尺寸信息，以及使用`attachEvent`和`addEventListener`来监听`onload`事件，确保在内容加载完成后正确地调整`iframe`的大小。
iframe父页面与子页面通信及相互调用方法
09-13
在网页开发中，`iframe`（Inline Frame）是一种嵌入其他HTML文档的元素，它允许我们在一个页面中显示另一个页面的内容。...通过合理的API使用和安全措施，我们可以构建出高效且安全的`iframe`通信系统。
JavaScript iframe的相互操作浅析
12-11
通常，我们可以使用`window.frames`对象来引用iframe，然后访问其`contentWindow`或`contentDocument`属性来操作子页面的DOM或执行JavaScript。 2. **子页面与父页面的交互**： - 在FrameA.aspx中，`getParent()`...
Js:关于document.execCommand()函数可用参数大解析
nittystone的专栏
03-01 2157
2D-Position 允许通过拖曳移动绝对定位的对象。 AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。 BackColor 设置或获取当前选中区的背景颜色。 BlockDirLTR 目前尚未支持。 BlockDirRTL 目前尚未支持。 Bold 切换当前选中区的粗体显示与否。 BrowseMode 目前尚未支持。 Copy 将当
iframe.contentWindow 介绍
初漾的博客
08-01 1万+
参考：http://blog.csdn.net/alex8046/article/details/51456098一、父级窗口操作iframe里的dom js操作iframe里的dom可以使用contentWindow属性： contentWindow属性，是指 指定的frame或者iframe所在的window对象，在IE中iframe或者frame的contentWindow属性可以省略，
iframe 添加点击事件
最新发布
06-02
可以使用 JavaScript 在 iframe 中添加点击事件。 首先，需要获取到 iframe 的 DOM 对象，可以通过以下方式获取： ```javascript var iframe = document.getElementById('myIframe'); var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; ``` 然后，可以在获取到 iframe 的 DOM 对象后，向其中添加点击事件，例如： ```javascript var btn = iframeDocument.createElement('button'); btn.innerHTML = '点击我'; btn.addEventListener('click', function() { alert('点击了按钮'); }); iframeDocument.body.appendChild(btn); ``` 这段代码会在 iframe 中添加一个按钮，并为其添加点击事件，点击按钮时会弹出一个提示框。 注意，iframe 必须在同域中，否则会出现跨域问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值