Javascript 根据内容更改iframe高度

iframe标记：

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

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

有人帮忙吗

---

仅供参考：我还尝试从iframe中删除滚动属性。但它不起作用。

如果您想滚动iframe的滚动条，请尝试使用此选项

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

只要把最小高度和添加溢出-y道具作为滚动它将工作

或者，如果你不想滚动，那么尝试像

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

---

您可以尝试使用以下脚本

<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()">

---

这是其中一个比实际情况更难的问题。为了保持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版本，请参见此

如果确实溢出了正文，并且无法修复代码来停止此操作，那么使用document.documentElement的offsetHeight或scrollHeight属性是最好的选择。两者都有优点和缺点，最好只是对两者进行测试，看看哪个对你有用

发送消息 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;
}

变异观察者 更现代的broswers的另一个进步是它允许您观察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：复选框和：导致页面大小调整的悬停事件，避免在IrrMas的体中使用高度AutoCAD和HTML标记，最后调整窗口大小。p> IFrame大小调整器库 我将所有这些都封装在一个简单的无依赖性库中，它还提供了一些这里没有讨论的额外函数

---

<>这是用IE8+./P>工作的，请考虑两个建议。

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();
}