iframe跨域问题思考

在项目中遇到iframe跨域导致的DOM操作失效问题,分析了问题原因并提出解决方案。通过改变查询范围和重新绑定事件解决iframe内的元素操作,同时介绍了判断iframe加载完成的两种方法。在使用window.top.dialog时,注意多重弹窗可能引发的问题,并分享了相关参考资料。
摘要由CSDN通过智能技术生成

工作遇到一个bug,弹窗调整至顶层window.top.dialog,使用的artDialog弹窗插件,本来用的好好的,可是随着需求的增加,bug就出现。

需求:在一个弹窗基础上,再添加弹窗展示某项数据,后台接口请求数据

代码现状:那个弹窗是通过iframe引用一个新的页面展示,我要在那个iframe引用的页面添加另外弹窗


问题:1.那个弹窗若是保证正常展示,那个弹窗展示也是在iframe框架内部,很小,跟要求的全屏遮罩展示有差距

    2.抛开上面美观,降低需求标准貌似也行得通,毕竟功能达标,但是另外一个新需求彻底打破:三层弹窗,就是在第二层弹窗基础上再次开第三个弹窗

    3.既然绕不开,那就使用顶层弹窗window.top,问题随之而来,iframe内部的dom元素找不到,html控件操作失效,只剩下事件

   4.引用的那个页面是新页面,但在同个主域名下

问题原因:js的操作dom元素的api都是基于document文档,iframe内部也遵循这个原理。现在认为置顶弹窗,突破iframe限制,导致正常api找不到dom元素

问题解决:1.改变查询范围,也就是作用域。js和那些插件,例如jQuery等默认都是document范围查找。

同域下:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值