iframe事件冒泡的问题

最新推荐文章于 2024-07-14 17:41:27 发布
最新推荐文章于 2024-07-14 17:41:27 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45221036/article/details/120814941
版权
在React项目中，由于iframe的事件无法冒泡到父页面，导致问题出现。文章探讨了这个问题的原因，并提出了两种解决方法：1. 设置`document.domain`使iframe和父页面在同一主域；2. 使用`postMessage`进行跨窗口通信，详细阐述了两种方法的实现思路和适用场景。
摘要由CSDN通过智能技术生成

iframe事件冒泡的问题

在react中遇到了遇到一个问题，导致的原因就是：iframe的事件只能冒泡到iframe下的window，不能冒泡到父页面的window。

例子图

实现思路：通过监听iframe的点击事件，使用js实现自动点击button，来收起popover。（存在问题：iframe跨域）

在本地开发时，只能把项目跑在本地的不同端口上，所以是跨域的，线上环境不跨域。（如果想要实现本地模拟正式线上环境，需要本地启动nginx服务器代理到相同端口下）

方法1：domain

跨域报错

因为此时两个页面的主域都是example.com，所以在两个页面中都使用document.domain='example.com'设置下主域相同，设置了之后就不会有上面的报错（虽然线上环境不跨域，但是想要iframe之间进行通信，还是必须要使用document.domain设置下）

方法2：postMessage

父页面：


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  高桥靓仔
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
iframe里面事件会冒泡么_js 冒泡事件与解决冒泡事件

				
			

			

				

					weixin_29013129的博客
				

				

					12-10
					
					952
					
				

			

		

		

			
				
事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。代码：<div id="div1">  <div id="div2">    <div id="div3">    div>  div>div><style>    #div1{      width: 300px;      ...

			
		

	



                

              
                



	

		

			

				
					
载入的iframe页面会挡住父级页面一切冒泡事件，怎么破?

				
			

			

				

					高先生的猫
				

				

					07-02
					
					2496
					
				

			

		

		

			
				
最近遇到个坑，页面引入了一个iframe，结果页面上所有的点击事件都失效了。
解决办法是手动绑定iframe里面事件，在事件里面触发当前窗口事件


// 点击了不触发
document.body.addEventListener('click', () => {console.log(43434343)})
// 在iframe里面手动触发
$('#iframe').contentWindow.document.body.addEventListener('click', () => {
  

			
		

	



                


  
              

                


	

		

			

				
					
iframe中的鼠标事件无法冒泡到外部如何解决

				
			

			

				

					wusandaofwy的博客
				

				

					01-24
					
					631
					
				

			

		

		

			
				
iframe中的鼠标事件无法冒泡到外部如何解决


			
		

	





	

		

			

				
					
【iframe】基本使用以及动态创建和销毁

					
最新发布

				
			

			

				

					成长之痛
				

				

					07-14
					
					548
					
				

			

		

		

			
				
tip有些场景在使用iframe后，资源没有得到释放，造成页面卡顿，比如二级弹框里面显示iframe,在关闭弹框后没有进行销毁，造成不必要的内存占用,有时候销毁iframe是有必要的。

			
		

	



		

			
		



	

		

			

				
					
解决点击事件冒泡

				
			

			

				

					11-02
				

			

		

		

			
				
解决/阻止 div层内的div层点击事件冒泡触发的小方法
示例代码

			
		

	





	

		

			

				
					
JS实现定时功能

				
			

			

				

					Garnett_zk的博客
				

				

					07-11
					
					315
					
				

			

		

		

			
				
js实现定时器1.只执行一次2.重复执行
1.只执行一次
function updateData(){
 //在控制台打印一句话
console.log("Welcom the World");
}
 
//3秒后执行updateData函数，且只执行一次
 window.setTimeout("updateData()",3000);

2.重复执行
function updateData(){...

			
		

	





	

		

			

				
					
自动的iframe增大，使用JS的抛出

				
			

			

				

					Zzz's Blog
				

				

					03-03
					
					1309
					
				

			

		

		

			
				
父文件============ //iframe的高度随内容自动增大，而不产生下拉滚动条。 function autoResize() { try { document.all["uploadimg"].style.height=uploadimg.document.body.scrollHeight; }catch(e){} } 子文件=============已上传: xxxx

			
		

	





	

		

			

				
					
JavaScript事件冒泡简介及应用

				
			

			

				

					weixin_30709635的博客
				

				

					08-23
					
					409
					
				

			

		

		

			
				
一、什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
打个比方说：你在地方法院...

			
		

	





	

		

			

				
					
js之iframe子页面与父页面通信

				
			

			

				

					
				

				

					05-07
					
					585
					
				

			

		

		

			
				
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。
一、同域下父子页面的通信
父页面parent.html

<html>
<head>
    <script type="text/javascript">
        function say(){
            aler...

			
		

	





	

		

			

				
					
事件委托与阻止冒泡阻止其父元素事件触发

				
			

			

				

					09-04
				

			

		

		

			
				
当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的，解决方法就是加一句阻止冒泡即可

			
		

	





	

		

			

				
					
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

				
			

			

				

					11-27
				

			

		

		

			
				
本篇文章将深入探讨如何使用IE8浏览器内置的`setCapture`和`releaseCapture`方法来解决iframe中的拖拽事件问题。  首先，我们要了解在现代浏览器（如Chrome）中，拖拽事件通常可以通过监听`mousedown`、`mousemove`...

			
		

	





	

		

			

				
					
JavaScript中的事件（iframe与父窗口）

				
			

			

				

					04-03
				

			

		

		

			
				
当涉及到IFrame（内联框架）和“父窗口”的交互时，事件处理机制变得更加复杂。在这个主题中，我们将深入探讨JavaScript中的事件，特别是IFrame与父窗口之间如何通信。  首先，事件是网页中发生的特定动作，比如鼠标...

			
		

	





	

		

			

				
					
JavaScript的数据类型、事件委托、事件冒泡、call、apply、bind区别......今日份复习总结笔记，希望也可以帮到大家~

				
			

			

				

					weixin_55437576的博客
				

				

					04-10
					
					877
					
				

			

		

		

			
				
HTML部分

Src和href区别

1.src是指向外资源的位置。指向内容嵌入到当前位置，将资源下载并应用到文档中。在加载该资源时会暂停其他资源的处理，直到该资源执行完毕。因此js文件应该放在底部。

2.href指向网络资源所在的位置，建立连接。在识别文件时，不会停止对当前文档的处理。

3.用link处理css文件而不是import

4.link属于html标签，在加载页面时会被同时加载，权重大于import，不存在浏览器兼容问题

5.import是css提供的，在页面加载完成后才会被加载，只在

			
		

	





	

		

			

				
					
JavaScript事件代理（事件委托）

					
热门推荐

				
			

			

				

					越努力，越幸运！
				

				

					01-11
					
					7万+
					
				

			

		

		

			
				
基本概念

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。


举个通俗的例子

比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方...

			
		

	





	

		

			

				
					
iframe 里面的遮罩被父元素盖住问题

				
			

			

				

					qq_40247562的博客
				

				

					11-07
					
					4486
					
				

			

		

		

			
				
前言：最近项目遇到的问题，项目的所有菜单点击会出现对应的子页面，同时出现本页面的选项卡，（之后类似于选项卡的操作，不过选项卡的标签是由点击的菜单组合而成）。类似效果如下：



实现方法：点击每个菜单的时候，下面的内容由iframe 切换，同时创建选项卡......。

问题：由于所有的子页面是由iframe 链接进去，所以在iframe上的遮罩层不会遮住完成的dom,导致外层的按钮还能操作。

...

			
		

	





	

		

			

				
					
在引入的iframe的页面中触发事件，使所有页面跳转到新页面。

				
			

			

				

					baidu_38027860的博客
				

				

					05-18
					
					5486
					
				

			

		

		

			
				
在做项目的时候碰到了页面中引入iframe的需求，没有过多考虑，直接就上手开弄了，发现iframe坑很多啊，首先就是自适应高度，兼容性最好的是使用px，其余类似rem、vh等单位或多或少都会存在问题，无奈只能想办法解决了 。因为我的页面绝大部分内容都是通过请求之后才会追加到页面上的，所以一开始就让引入页面获取iframe的高度会存在问题，解决办法是在iframe的事件中添加了触发引入页面的事件，也...

			
		

	





	

		

			

				
					
父页面给iframe的操作

				
			

			

				

					请叫我
				

				

					12-21
					
					721
					
				

			

		

		

			
				
parent.frames["frameName"].window.functionName(); 
frameName:IFrame的ID; 
funtionName:子页面中JS方法名; 



var obj = parent.frames["frameName"].window; 
在父页面访问子页面中某个控件如:obj.document.getElementById('cl

			
		

	





	

		

			

				
					
JS小贴士：理解闭包与事件委托的阻止冒泡

				
			

			

				

					
				

			

		

		

			
				
"这篇资源主要讨论了JavaScript编程中的两个重要概念——闭包和事件委托的阻止冒泡。通过实例解析了闭包的产生及其工作原理，同时也提到了一个实际编程场景中遇到的问题以及如何利用闭包来解决。此外，还简要提到了...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值