关于Iframe嵌入页面，获取内部页面高度的办法

项目中经常会嵌入别人的页面，如果不知道被嵌入页面的高度，就没法给Iframe高度赋值，内部嵌入的页面就会出现滚动条，影响页面的美观。

1、如果被嵌入页面和当前页面不跨域，可以使用Iframe的@load加载事件获取内部高度

在对应的加载事件里获取内部页面高度，最后将获取的高度赋值

iframeload() {

setTimeout(() => {

try {

const cIframe = document.getElementById("outerPage");

let aWindow = cIframe.contentWindow;

let aWindowHeight =

aWindow .document.documentElement.scrollHeight ||

aWindow .document.body.scrollHeight;

let doc = cIframe.contentDocument || cIframe.document;

let cHeight = Math.max(

doc.body.clientHeight,

doc.documentElement.clientHeight

);

let sHeight = Math.max(

doc.body. scrollHeight,

doc.documentElement.scrollHeight

);

let lheight = Math.max(cHeight, sHeight);

let finalHeight = Math.max(lheight, aWindowHeight );

this.iframeHeight = finalHeight + "px";

} catch (e) {

//跨域获取不到

throw new Error("自定义错误setIframeHeight Error");

}

}, 1500);

},

2、如果被嵌入页面和当前页面跨域，可以在子页面使用postMessage(),父页面接受该信息改变高度。

如果跨域且子页面的高度是固定的那么直接使用postMessage()。

//等子页面渲染好了之后，获取高度

let viewHeight = document.getElementById("mainF").clientHeight;

window.parent.postMessage(

{

code: "iframeheght",

text: viewHeight

},

"*"

);

如果跨域且被嵌入内部的页面高度会变化。

页面高度如果会变化，通常都是某个数据的变化，监听该数据的变化然后在其变化后获取高度。

由于数据变化到页面渲染完成会有一定的延时，理论上必须等待页面渲染完成才能获取之后的高度。但页面渲染完成的时间是无法确定的，例如数组的渲染，长度为2的数组渲染和长度为20 的数组渲染时间肯定不一致。因此当数据变化后，设置每400ms获取当前页面的高度（这是设置时间可以自己定），如果当前高度和上一次历史记录高度一致就post给父页面，重置父页面的高度，不一致就继续等待400ms.。

submit() {

//每500ms获取当前页面的高度，如果当前高度和上一次历史记录高度一致就post给父页面，重置父页面的高度

let viewHeight = document.getElementById("mainF").clientHeight;

if (viewHeight !== this.currentPageHeight) {

//上一次存下的历史页面高度

this.currentPageHeight = viewHeight;

setTimeout(() => {

this.submit();

console.log("延时viewHeight", viewHeight);

}, 400);

} else {

window.parent.postMessage(

{

code: "iframeheght",

text: viewHeight

},

"*"

);

console.log("viewHeight", viewHeight);

}

},

完整的代码如下

//子页面

submit() {

//每500ms获取当前页面的高度，如果当前高度和上一次历史记录高度一致就post给父页面，重置父页面的高度

let viewHeight = document.getElementById("mainF").clientHeight;

if (viewHeight !== this.currentPageHeight) {

this.currentPageHeight = viewHeight;

setTimeout(() => {

this.submit();

console.log("延时viewHeight", viewHeight);

}, 400);

} else {

window.parent.postMessage(

{

code: "iframeheght",

text: viewHeight

},

"*"

);

console.log("viewHeight", viewHeight);

}

},

//父页面