遇到问题:
iframe在IOS下,加载富文本,富文本内样式会变大,并不是默认的16px
解决方案:
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
同时iframe标签设置为
<!-- IOS为: -->
<iframe scrolling="no"></iframe>
若高度是固定的,则需判断手机类型为Android还是IOS,若为Android则讲scrolling改为auto
<!-- Android为: -->
<iframe scrolling="auto"></iframe>
若iframe的高度为自适应,则scrolling为no,在通过js动态适应富文本高度
setIframeHeight(iframe) {
let _this = this
if (iframe) {
let iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
let imgs = iframeWin.document.getElementsByTagName("img");
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.maxWidth = "100%";
}
let a, b, c = 0;
let timer = setInterval(function() {
if (c == 1) {
a = iframeWin.document.body.scrollHeight || iframeWin.document.body.scrollHeight;
} else if (c == 10) {
b = iframeWin.document.body.scrollHeight || iframeWin.document.body.scrollHeight;
if (a == b) {
clearInterval(timer);
}
c = 0;
}
c++;
iframe.style.height = iframeWin.document.body.scrollHeight + "px" || iframeWin.document.documentElement.scrollHeight + "px";
}, 800);
}
}
}