获取跨域iframe高度 - 是否有跨域的iframe高度自动调整大小工作?

react iframe自适应高度 (4)

你有三种选择：

1.使用iFrame调整器

这是一个简单的库，用于保持iFrame大小适合其内容。它使用PostMessage和MutationObserver API，并支持IE8-10。它还具有用于内容页面的选项，以请求包含的iFrame具有特定的大小，并且在完成它时也可以关闭iFrame。

http://davidjbradshaw.github.io/iframe-resizer/

2.使用Easy XDM（PostMessage + Flash组合）

Easy XDM使用一系列技巧来实现多个浏览器中不同窗口之间的跨域通信，并且有一些示例将其用于iframe调整大小：

http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/

http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/

Easy XDM通过在现代浏览器上使用PostMessage和基于Flash的解决方案作为旧版浏览器的后备工作。

另请参阅Stackoverflow上的此线程（还有其他人，这是一个常见问题）。另外， Facebook似乎也会采用类似的方法。

3.通过服务器进行通信

另一个选择是将iframe高度发送到服务器，然后使用JSONP从父级网页中从该服务器进行轮询（如果可能，则使用长轮询）。

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

我发现了另一个使用PHP获取iframe大小的web dev的服务器端解决方案。

首先是通过内部函数将服务器脚本PHP用于外部调用:(如带有curl和dom的file_get_contents ）。

function curl_get_file_contents($url,$proxyActivation=false) {
    global $proxy;
    $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);
    if($proxyActivation) {
        curl_setopt($c, CURLOPT_PROXY, $proxy);
    }
    $contents = curl_exec($c);
    curl_close($c);
    $dom = new DOMDocument();
    $dom->preserveWhiteSpace = false;
    @$dom->loadHTML($contents);
    $form = $dom->getElementsByTagName("body")->item(0);
    if ($contents) //si on a du contenu
        return $dom->saveHTML();
    else
        return FALSE;
}
$url = "http://www.google.com"; //Exernal url test to iframe
<html>
    <head>
    <script type="text/javascript">

    </script>
    <style type="text/css">
    #iframe_reserve {
        width: 560px;
        height: 228px
    }
    </style>
    </head>

    <body>
        <div id="iframe_reserve"><?php echo curl_get_file_contents($url); ?></div>

        <iframe id="myiframe" src="http://www.google.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"  style="overflow:none; width:100%; display:none"></iframe>

        <script type="text/javascript">
            window.onload = function(){
            document.getElementById("iframe_reserve").style.display = "block";
            var divHeight = document.getElementById("iframe_reserve").clientHeight;
            document.getElementById("iframe_reserve").style.display = "none";
            document.getElementById("myiframe").style.display = "block";
            document.getElementById("myiframe").style.height = divHeight;
            alert(divHeight);
            };
        </script>
    </body>
</html>

您需要在div（ iframe_reserve ）下使用简单的echo curl_get_file_contents("location url iframe","activation proxy")显示函数调用生成的html。

这样做后，一个身体事件函数onload用JavaScript获取页面iframe的高度，只需简单控制内容div（ iframe_reserve ）

所以我用divHeight = document.getElementById("iframe_reserve").clientHeight; 在屏蔽div容器（ iframe_reserve ）之后获取外部页面的高度。在此之后，我们加载iframe，其高度恰到好处。

我所做的是比较iframe scrollWidth，直到它改变大小，而我增量设置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>

我有一个脚本在内容中放入iframe中。它还确保iFrameResizer存在（它将其注入为脚本），然后进行大小调整。

我将在下面简单介绍一下。

// /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/[email protected]/js/iframeResizer.contentWindow.min.js
        resizerScriptTag.src = 'https://unpkg.com/[email protected]/js/iframeResizer.min.js';
    } else {
        // Cool, the iFrameResizer exists so we can just load our iframe.
        loadIFrame();
    }    
}())

然后，iframe内容可以通过使用如下脚本被注入到另一个页面/站点中的任何地方：

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

无论您放置脚本标记的位置如何，iframe内容都将被注入。

希望这对某人有帮助。 👍