最近开发项目,遇到需要开发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, '*')
}
(2) 在iframe里面的script中,添加监听事件
window.addEventListener('message', function (e) {
console.log(e.data)
}, false)
在这里,就会遇到 坑:
坑一,锚点后会带动页面整体上移.千万不要用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)
正确的写法是:
正确的写法是:
window.addEventListener('message', function (e) {
// 用window,不要用document,应该是作用域问题,有污染导致
window.location.hash = `#${e.data}`;
}, false)
❤如果文章对您有所帮助,就在文章的右上角或者文章的末尾点个赞吧!(づ ̄ 3 ̄)づ
❤如果喜欢比卡丘分享的文章,就给比卡丘点个关注吧!(๑′ᴗ‵๑)づ╭❤~
❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复讨论(请勿发表攻击言论)
拿走,不用谢!!!送人玫瑰,手留余香