iframe多层嵌套引起子表错位

在iframe多层嵌套的情况下,切换时子层iframe会出现滚动到顶部的错误,表现为子表位置错位。解决方案包括:1) 进入iframe时保存scrolltop值到&_scrolltop属性;2) 切换时将&_scrolltop值赋回给iframe的scrolltop,以保持滚动位置。通过这种方法,可以避免iframe内容错位的问题,继续在代码的海洋中探索和学习。

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

 

bug:iframe多层嵌套的时候,切换时嵌套得子层会自动触发一个滚动到顶部的事件 


这问题我这里表现为:iframe里嵌套得dialog,dialog得ui-content是iframe,然后点击子表,继续在iframe里打开一个dialog,我这里有二层子表,加上原本的iframe,有4层iframe。切换tab时,切换回来,打开得子表位置错位了


正常应该是:


dom结构图:



 


解决思路:参考https://bbs.youkuaiyun.com/topics/392438851 多个iframe切换时,如何保持每个iframe的滚动位置

 

 

二个步骤:
1、获取值:进入iframe的时候保存当前的scrolltop,可以新设一个属性_scrolltop保存该滚动值。如果多层嵌套找寻到iframe进行设置即可,
我此处的代码片段:

secondIframe =firstDialog.querySelector("iframe")

 secondIframeId =secondIframe.getAttribute("data-key")

 secondScrollTop =secondIframe.contentDocument.documentElement.scrollTop

//把iframe滚动得高度存到iframe得属性_scrollTop

secondIframe.setAttribute('_scrollTop',secondIframe.contentDocument &&  secondIframe.contentDocument.documentElement &&  secondScrollTop)

2、赋值:切换的时候把iframe的新属性_scrolltop(这个是之前滚动过的值)赋值给当前iframe的scrolltop(进入iframe触发事件,清0了)。
代码片段:

if (secondIframe.getAttribute('_scrollTop')) {

    secondIframe.contentDocument.documentElement.scrollTop = secondIframe.getAttribute('_scrollTop')

}


希望通过我们得交流和学习,能够慢慢有艘船,在大海中航行,不用为了活下去而忽略海上得风景,其实慢慢成长我们会发现,大海,真是个神秘得地方。代码得海洋有些深,我这还不会游泳,就带着游泳圈,还要带个打气筒,时不时打点气,不让自己沉下去。

学习使我们优秀,我们一起加油吧!

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值