iframe标签跨域自适应高度
iframe开发中,遇到两个域名不一致,想要获取iframe中的内容时,跨域问题;
查了很多方案:最终解决方式使用了postmessage来进行两个项目间数据传递(当然,这个适用于两个项目都能进行开发的情况)
使用postmessage时,要注意一点,如果你两方都不确定具体域名是哪个时,postmessage第二个参数TargetOrigin直接使用“ * ”就好,它对任何发送的信息都不会进行限制,但可能会有弊端(暂不清楚,可能会存在漏洞吧)
我们通过window.message来监听postmesage发过来的信息
实现如下:
父页面调用:
<iframe src="www.baiidu.com" allowTransparency="true" marginheight="40px" scrolling="no" id="detail" frameborder="0" width="100%" onLoad="onLoad()"></iframe>
js代码
window.onLoad = () => { var obj = $('#detail')[0].contentWindow; obj.postMessage('height', '*'); window.onmessage = function (e) { var obj = e.data; $('#detail').css('height', obj.height); } }
子页面:
注意:document.body.getBoundingClientRect().height获取高度很重要,因为在获取iframe高度时,刚开始我是使用document.body.scrollHeight来获取页面内容高度,刚开始在pc端调试是正常的,然而,到了移动端调试时,高度不准确,原因是使用document.body.scrollHeight时返回现在所展示这些页面中的最高高度,而不是每个页面的内容高度
代码实现如下:
window.onmessage = function (e) { var height = Number(document.body.getBoundingClientRect().height) + 80; var obj = { height, } top.postMessage(obj, '*') }