是否有跨域iframe高度自动调整器可以工作？

我尝试了一些解决方案，但没有成功。我想知道是否有一个解决方案，最好有一个简单易懂的教程。

您有三种选择：

1.使用iFrame大小调整器 这是一个简单的库，用于保持iFrame的大小与其内容相符。它使用PostMessage和MutationObserver API，并为IE8-10提供了支持。它还为内容页提供选项，以请求包含特定大小的iFrame，并且在您完成iFrame时还可以关闭iFrame

2.使用Easy XDM（PostMessage+Flash组合） Easy XDM使用一系列技巧来实现多种浏览器中不同窗口之间的跨域通信，下面是使用它调整iframe大小的示例：

Easy XDM使用现代浏览器和基于Flash的解决方案作为旧浏览器的后备方案

另请参见（还有其他问题，这是一个常见问题）。也

3.通过服务器进行通信

---

另一种选择是将iframe高度发送到您的服务器，然后使用JSONP从父web页面从该服务器进行轮询（或者如果可能，使用长轮询）。

我找到了另一种用于web开发的服务器端解决方案，使用PHP获得iframe的大小

首先是使用服务器脚本PHP通过内部函数进行外部调用：（比如带有but curl和dom的

文件\u get\u contents

）

函数curl\u get\u file\u内容（$url，$proxyActivation=false）{ 全球美元代理； $c=curl_init（）； curl_setopt（$c，CURLOPT_RETURNTRANSFER，1）； curl_setopt（$c，CURLOPT_USERAGENT，“Mozilla/5.0（Windows；U；Windows NT 5.2；en-US；rv:1.8.1.7）Gecko/20070914 Firefox/2.0.0.7”）； curl_setopt（$c，CURLOPT_REFERER，$url）； curl_setopt（$c，CURLOPT_URL，$URL）； curl_setopt（$c，CURLOPT_FOLLOWLOCATION，1）； 如果（$proxyActivation）{ curl_setopt（$c，CURLOPT_PROXY，$PROXY）； } $contents=curl_exec（$c）； 收尾费（$c）； $dom=新的DOMDocument（）； $dom->preserveWhiteSpace=false； @$dom->loadHTML（$contents）； $form=$dom->getElementsByTagName（“body”）->item（0）； if（$contents）//si在du contenu上 返回$dom->saveHTML（）； 其他的 返回FALSE； } $url=”http://www.google.com"; //iframe的外部url测试 #伊夫鲁保护区{ 宽度：560px； 高度：228px } window.onload=函数（）{ document.getElementById（“iframe_reserve”）.style.display=“block”； var divHeight=document.getElementById（“iframe_reserve”）.clientHeight； document.getElementById（“iframe_reserve”）.style.display=“无”； document.getElementById（“myiframe”）.style.display=“block”； document.getElementById（“myiframe”）.style.height=divHeight； 警戒（高度）； }; 您需要在div（

iframe\u reserve

）下显示函数调用通过使用简单的

echo curl\u get\u file\u内容（“位置url iframe”，“激活代理”）生成的html

完成此操作后，使用javascript加载body事件函数onload，只需简单控制content div（

iframe\u reserve

）即可获取页面iframe的高度

---

所以我使用了

divHeight=document.getElementById（“iframe\u reserve”）.clientHeight

为了获得外部页面的高度，我们将在屏蔽div容器后调用（

iframe\u reserve

）。在此之后，我们加载具有良好高度的iframe，仅此而已。

我所做的是比较iframe滚动宽度，直到它改变大小，同时递增设置iframe高度。这对我来说很好。您可以根据需要调整增量

   <script type="text/javascript">
    function AdjustIFrame(id) {
        var frame = document.getElementById(id);
        var maxW = frame.scrollWidth;
        var minW = maxW;
        var FrameH = 100; //IFrame starting height
        frame.style.height = FrameH + "px"

        while (minW == maxW) {
            FrameH = FrameH + 100; //Increment
            frame.style.height = FrameH + "px";
            minW = frame.scrollWidth;
        }
    }

   </script>


<iframe id="RefFrame" onload="AdjustIFrame('RefFrame');" class="RefFrame"
    src="http://www.YourUrl.com"></iframe>

功能调整框架（id）{
var frame=document.getElementById（id）；
var maxW=frame.scrollWidth；
var minW=maxW；
var FrameH=100；//IFrame起始高度
frame.style.height=FrameH+“px”
while（minW==maxW）{
FrameH=FrameH+100；//增量
frame.style.height=FrameH+“px”；
minW=帧宽度；
}
}

这里是一个替代实现

基本上，若你们能够在其他域编辑页面，你们可以放置另一个属于你们服务器的iframe页面，这样可以将高度保存到cookies中。 使用更新时读取cookies的间隔，更新iframe的高度。仅此而已

编辑：2019年12月

上面的解决方案基本上使用了iframe中的另一个iframe。第三个iframe属于顶层页面域，您可以使用一个查询字符串调用此页面，该查询字符串将大小值保存到cookie中，外部页面以一定的间隔检查此查询。但这不是一个好的解决方案，因此您应该遵循以下方法：

在首页：

window.addEventListener("message", (m)=>{iframeResizingFunction(m)});

在这里，您可以检查

m.origin

以查看它的来源

在框架页面中：

window.parent.postMessage({ width: 640, height:480 }, "*")

尽管如此，请不要忘记这不是一种安全的方式。要使其安全，请使用所需的值更新*值（targetOrigin）。

---

请遵循文档说明：

我得到了一个解决方案，可以根据iframe的内容动态设置其高度。这适用于跨域内容。 要实现这一点，需要遵循一些步骤

假设您在“abc.com/page”网页中添加了iframe

接下来，您必须在网页“abc.com/page”下绑定windows“message”事件

window.addEventListener（'message'，函数（事件）{
//为了安全起见，我们必须检查消息事件的内容
//事件数据包含从iframe中添加的页面发送的消息，如步骤3所示
if（event.data.hasOwnProperty（“FrameHeight”））{
//设置Iframe的高度
$（“#IframeId”）.css（“height”，event.data.FrameHeight）；
}
});

在iframe加载时，您必须

window.parent.postMessage({ width: 640, height:480 }, "*")

// /js/embed-iframe-content.js

(function(){
    // Note the id, we need to set this correctly on the script tag responsible for
    // requesting this file.
    var me = document.getElementById('my-iframe-content-loader-script-tag');

    function loadIFrame() {
        var ifrm = document.createElement('iframe');
        ifrm.id = 'my-iframe-identifier';
        ifrm.setAttribute('src', 'http://www.google.com');
        ifrm.style.width = '100%';
        ifrm.style.border = 0;
        // we initially hide the iframe to avoid seeing the iframe resizing
        ifrm.style.opacity = 0;
        ifrm.onload = function () {
            // this will resize our iframe
            iFrameResize({ log: true }, '#my-iframe-identifier');
            // make our iframe visible
            ifrm.style.opacity = 1;
        };

        me.insertAdjacentElement('afterend', ifrm);
    }

    if (!window.iFrameResize) {
        // We first need to ensure we inject the js required to resize our iframe.

        var resizerScriptTag = document.createElement('script');
        resizerScriptTag.type = 'text/javascript';

        // IMPORTANT: insert the script tag before attaching the onload and setting the src.
        me.insertAdjacentElement('afterend', ifrm);

        // IMPORTANT: attach the onload before setting the src.
        resizerScriptTag.onload = loadIFrame;

        // This a CDN resource to get the iFrameResizer code.
        // NOTE: You must have the below "coupled" script hosted by the content that
        // is loaded within the iframe:
        // https://unpkg.com/iframe-resizer@3.5.14/js/iframeResizer.contentWindow.min.js
        resizerScriptTag.src = 'https://unpkg.com/iframe-resizer@3.5.14/js/iframeResizer.min.js';
    } else {
        // Cool, the iFrameResizer exists so we can just load our iframe.
        loadIFrame();
    }    
}())

<script
  id="my-iframe-content-loader-script-tag"
  type="text/javascript"
  src="/js/embed-iframe-content.js"
></script>