有关iframe锚点,锚点出现上下偏移,锚点出现页面显示问题.iframe的srcdoc问题

最近开发项目,遇到需要开发iframe页面,并且还要在外面弄个导航栏,点击后iframe要跳到对应的锚点位置.

遇到过一些坑,希望分享后能帮到大家.

1.后端是直接给的一个html文件,所以我创建时不是用iframe的src来接受,而是用srcdoc直接展示.大家可以去搜一下iframe.src是对应的url.而srcdoc是对应的html文件

2.锚点,我们是不能直接给iframe内部直接锚点的,因为iframe是不能直接操作.需要利用iframe的postMessage事件.具体的大家可以百度具体文档.方法
(1)在外面导航页面添加点击事件(比如说hanldClick)

hanldClick() { // val是你点击的iframe对应的锚点id
document.getElementById('iframeId').contentWindow.postMessage(val, '*')
}
1
2
3

(2) 在iframe里面的script中,添加监听事件

window.addEventListener('message', function (e) {
       console.log(e.data)
    }, false)
1
2
3

在这里,就会遇到 坑:

坑一,锚点后会带动页面整体上移.千万不要用margin-top,用了后你都发现没啥鸟用.要用padding-top .其他小偏移自己处理了,这里不做详解

坑二,如果你在iframe里面像下面这么写,就会发现iframe变成了你现在的整个大的html页面,而且导航没啥用

window.addEventListener('message', function (e) {
        const link = document.createElement('a');
        link.href = `#${e.data}`;
        document.getElementById('#${e.data}').appendChild(link);
        link.click();
    }, false)
1
2
3
4
5
6

正确的写法是:
1

正确的写法是:

window.addEventListener('message', function (e) {
        // 用window,不要用document,应该是作用域问题,有污染导致
        window.location.hash = `#${e.data}`;
    }, false)
1
2
3
4

❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
❤如果喜欢比卡丘分享的文章，就给比卡丘点个关注吧！(๑′ᴗ‵๑)づ╭❤～
❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论(请勿发表攻击言论)

拿走,不用谢!!!送人玫瑰,手留余香