Question

iframe标记：

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

我正在尝试调整内容load.i上的iframe高度来尝试其他解决方案：

Link1

Link2

Link3

但是他们都没有解决我的问题。我尝试在窗口加载以及iframe加载时调用resize函数。但是每次设置的高度都不同（有时是实际内容高度，有时是iframe的原始高度）。

任何帮助人员..... ??

仅供参考：我也试过从iframe中删除滚动attr。但它不起作用

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。

如果您确实溢出了正文并且无法修复代码以阻止此操作，那么使用offsetHeight或scrollHeight document.documentElement属性是最佳选择。两者都有利弊，最好只测试两者，看看哪些适合你。

PostMessage的

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');

要接收消息，请为消息事件创建事件listerner。

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

更现代的broswers的另一个进步是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和：导致页面调整大小的悬停事件，避免在iFrames的body和html标签中使用height auto，最后调整窗口大小。

IFrame Resizer Library

我已经将所有这些包装在一个简单的无需依赖的库中，它还提供了一些未在此讨论的额外功能。

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

这适用于IE8 +。

Answer 2

您可以尝试使用以下脚本。

<script type="text/javascript">
  function iframeLoaded() {
    var iFrameID = document.getElementById('your_frame_id');
    if(iFrameID) {            
        iFrameID.height = "";
        iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
   }   
}
</script>

并将onload函数添加到iframe中，如

<iframe onload="iframeLoaded()">

Answer 3

如果您想滚动iframe

，请尝试使用此功能

<iframe style="height: 956px;overflow-y:scroll; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>

只需输入“min-height”并添加“overflow-y”prop作为滚动它将起作用

或者如果您不想滚动，请尝试

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

根据内容改变iframe高度

3 个答案:

计算出准确的高度

PostMessage的

MutationObserver

其他问题

IFrame Resizer Library