当我们在一个页面嵌套使用了iframe之后,发现iframe嵌套的页面样式乱了,但是页面样式都应用上了,查看元素之后发现,嵌套的iframe里面的html并没有动态的设置上font-size,它也没有应用外面的html的font-size大小,还是iframe自身默认rem值即1rem=16px,所以解决办法是给iframe里面的html也动态设置上font-size,但前提是必须在页面加载完成才有效即window.onload里面.
<iframe src="h5页面" frameborder="0" width="100%" height="100%" id="myIframe"></iframe>
<script>
!(function(doc, win) {
var timer,
docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
setFontSize = function() {
var width = docEle.getBoundingClientRect().width;
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
// iframe的html元素font-size设置 必须在加载完成去设置
win.onload = function() {
myIframe.contentWindow.document.documentElement.style.fontSize = width / 16 + "px"
}
};
win.addEventListener(evt, function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 1000);
}, false);
setFontSize()
doc.addEventListener("DOMContentLoaded", setFontSize, false);
}(document, window));
</script>
查看我们的页面发现正常,这种根据根元素大小而改变iframe这层就相当于是根元素我们也需要对最外面的html添加上font-size值。
本文地址:https://www.zhuimengzhu.com/details/448.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。