嵌套的iframe页面中rem字号变小问题处理

问题原因

如果 html 的 font-size: 100px，那字号为0.16rem的字实际为100px * 0.16 = 16px

故最外层的html的字号

与iframe下的html字号

不相同时，则会导致iframe页面内的字体字号存在问题

解决办法

先获取外层html的font-size

const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize); // 外层HTML的font-size值
1

方案一，同源情况下

const currentIframe = document.getElementById('IframeRef');
const currentDoc = currentIframe.contentDocument || currentIframe.contentWindow.document; // 非同源会在contentWindow.document报错
const htmlElement = currentDoc.getElementsByTagName("html");
htmlElement.style.fontSize = fontSize + 'px';
1
2
3
4

方案二，非同源情况下

运用postMessage向iframe内页面传递消息

父页面发生消息

const iframeElement = document.getElementById('IframeRef');
iframeElement.contentWindow.postMessage(
  JSON.stringify({
    event: 'design-font',
    param: {
      fontSize: fontSize + 'px',
    },
  })
);
1
2
3
4
5
6
7
8
9

iframe内的子页面接受消息

window.addEventListener('message', e => {
    // e.data为父页面发送的数据
    const data = JSON.parse(e.data);
    switch (data.event) {
    	case 'design-font':
    		document.documentElement.style.fontSize = (data.param ? data.param.fontSize : 0) || "100px";
    		break;
    	... // 其他消息
    }
    
}, false)
1
2
3
4
5
6
7
8
9
10
11