iframe高度自适应

在前端开发过程中用到了iframe控件。将其他页面嵌套如父页面中。当子页面高度不固定时,iframe的高度无法实现自适应。
解决方案:
父页面:

<iframe id="parentIframe"
            src="hello.html"
            frameborder="0" width="100%" height="100%"></iframe>

在子页面定义setParentIframeHeight()方法并调用。

function setParentIframeHeight() {
  try {
    var parentIframe = parent.document.getElementById("parentIframe");
    if (window.attachEvent) {
        window.attachEvent("onload", function () {
        parentIframe.height = document.documentElement.scrollHeight + 40 + "px";
        });
        return;
     } else {
        window.onload = function () {
          parentIframe.height = document.body.scrollHeight + 40 + "px";
        };
         return;
     }
  } catch (e) {
      throw new Error('setParentIframeHeight Error');
  }
}

父页面调用子页面方法:

$("#parentIframe")[0].contentWindow.getTest();

版权声明:本文为博客园博主「Spear_J」的原创文章,编写不易,转载请附上原文出处链接及本声明。
https://www.cnblogs.com/lmh15054109/p/15936302.html

posted @ 2022-02-25 15:33  Spear_J  阅读(191)  评论(0编辑  收藏  举报