0

iframe 标签：

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

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

链接1

链接2

链接3

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

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

仅供参考：我也尝试从 iframe 中删除滚动属性。但它没有用

4

3 回答 3

5

这是真正比它应该更难的问题之一。以下是您需要考虑的事项，以保持 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 版本，请参阅此答案。

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

留言

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 事件导致页面调整大小，避免在 iFrame 的 body 和 html 标签中使用 height auto，最后调整窗口大小。

IFrame 调整器库

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

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

这适用于 IE8+。

于 2014-04-10T20:01:42.663 回答
3

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

<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()">
于 2013-03-18T07:33:16.183 回答
1

如果你想为 iframe 滚动条试试这个

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

只需输入“min-height”并添加“overflow-y”道具作为滚动它就会起作用

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

<iframe scrolling="no" style="min-height: 956px; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>
于 2013-03-18T07:24:34.290 回答