iframe高度自适应的方法

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。

如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。

iframe内容未知,高度可预测

(如果在同个顶级域名下,不同子域名之间互通信息,设置document.domain="xxx.com")
function setIframeHeight(iframe) {
  if (iframe) {
    var iframeWin = iframe.contentWindow || i frame.contentDocument.parentWindow;
    if (iframeWin.document.body) {
  iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
    }
  }
};
window.onload = function () {
  setIframeHeight(document.getElementById('external-frame'));
};

参考 http://caibaojian.com/iframe-adjust-content-height.html

你可能感兴趣的:(iframe高度自适应的方法)