javascript - 根据内容更改 iframe 高度

Question

iframe 标签:

  <iframe scrolling="no" style="height: 956px; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>

我正在尝试在内容加载时调整 iframe 高度。我尝试了其他解决方案:

Link1

Link2

Link3

但它们都没有解决我的问题。我尝试在窗口加载和 iframe 加载时调用调整大小函数。但每次设置的高度都不同(有时是实际内容高度，有时是 iframe 的原始高度)。

任何帮助家伙......？？

仅供引用:我也尝试过从 iframe 中删除滚动属性。但它没有用

Answer 1

这是真正比实际更难的问题之一。以下是您需要考虑的事项，以保持 iFrame 的大小正确。

计算出准确的高度

获得 iFrame 的准确高度并不像它应该的那么简单，因为您可以选择六个不同的属性来检查它们，但没有一个会给出始终正确的答案。我想出的最佳解决方案是只要您不使用 CSS 来溢出 body 标签，这个函数就可以工作。

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        return parseInt(
            document.defaultView.getComputedStyle(document.body, null),
            10
        );
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

这是 IE9 版本，对于更长的 IE8 版本，请参阅此 answer .

如果您确实溢出了正文并且您无法修复代码来阻止它，那么可以使用 document.documentElement 的 offsetHeight 或 scrollHeight 属性 是你最好的选择。两者各有利弊，最好只是测试一下，看看哪个适合您。

发帖

postMessage API 提供了一种在 iFrame 与其父级之间进行通信的简单方法。

要向父页面发送消息，您可以按如下方式调用它。

parent.postMessage('Hello parent','http://origin-domain.com');

在另一个方向上，我们可以使用以下代码将消息发送到 iFrame。

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello my child', 'http://remote-domain.com:8080');

要接收消息，请为消息事件创建一个事件监听器。

function receiveMessage(event)
{
  if (event.origin !== "http://remote-domain.com:8080")
    return;

  console.log(event.data);
}

if ('addEventListener' in window){
    window.addEventListener('message', receiveMessage, false);
} else if ('attachEvent' in window){ //IE
    window.attachEvent('onmessage', receiveMessage);

这些示例使用 origin 属性来限制消息发送到的位置并检查消息的来源。可以指定 * 以允许发送到任何域，并且在某些情况下您可能希望接受来自任何域的消息。但是，如果您这样做，您需要考虑安全隐患并对传入消息实现您自己的检查以确保它包含您所期望的内容。在这种情况下，iframe 可以将其高度发布到“*”，因为我们可能有多个父域。但是，检查传入消息是否来自 iFrame 是个好主意。

function isMessageFromIFrame(event,iframe){
    var
        origin  = event.origin,
        src     = iframe.src;

    if ((''+origin !== 'null') && (origin !== src.substr(0,origin.length))) {
        throw new Error(
            'Unexpect message received from: ' + origin +
            ' for ' + iframe.id + '. Message was: ' + event.data  
        );
    }

    return true;
}

突变观察者

更现代的浏览器的另一个进步是 MutationObserver它允许你观察 DOM 的变化；因此现在可以检测可能影响 iFrame 大小的更改，而无需不断地使用 setInterval 进行轮询。

function createMutationObserver(){
    var
        target = document.querySelector('body'),

        config = {
            attributes            : true,
            attributeOldValue     : false,
            characterData         : true,
            characterDataOldValue : false,
            childList             : true,
            subtree               : true
        },

        observer = new MutationObserver(function(mutations) {
            parent.postMessage('[iframeResize]'+document.body.offsetHeight,'*');
        });

    log('Setup MutationObserver');
    observer.observe(target, config);
}

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

if (MutationObserver){
    createMutationObserver();
}

其他问题

其他需要考虑的事情包括，页面上有多个 iFrame，CSS :Checkbox 和 :Hover 事件导致页面大小调整，避免在 iFrames 的 body 和 html 标签中使用 height auto，最后调整窗口大小。

IFrame 缩放器库

我将所有这些都封装在一个简单的无依赖库中，该库还提供了一些此处未讨论的额外功能。

https://github.com/davidjbradshaw/iframe-resizer

这适用于 IE8+。