是否有跨域iframe高度自动调整器有效？

Question

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

Answer 1

你有三种选择:

1.使用iFrame-resizer

这是一个简单的库,用于保持iFrames的内容大小.它使用PostMessage和MutationObserver API,以及IE8-10的后备.它还有内容页面的选项,以请求包含iFrame的特定大小,并且当您完成它时也可以关闭iFrame.

https://github.com/davidjbradshaw/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从父网页轮询该服务器(如果可能,使用长轮询).

Answer 2

我得到了根据内容动态设置iframe高度的解决方案.这适用于跨域内容.要实现这一目标,需要遵循一些步骤.

1. 假设您已在"abc.com/page"网页中添加了iframe

   <div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>

2. 接下来,你必须在网页"abc.com/page"下绑定windows"message"事件

window.addEventListener('message', function (event) {
//Here We have to check content of the message event  for safety purpose
//event data contains message sent from page added in iframe as shown in step 3
if (event.data.hasOwnProperty("FrameHeight")) {
        //Set height of the Iframe
        $("#IframeId").css("height", event.data.FrameHeight);        
    }
});

3. 在iframe这里添加的主页面"xyz.pqr/contactpage"你必须绑定windows"message"事件,其中所有消息都将从"abc.com/page"的父窗口接收

function setIframeHeight(ifrm) {
   var height = ifrm.contentWindow.postMessage("FrameHeight", "*");   
}

最后,您的iframe高度将在iframe加载时设置.

快乐的编码!

Answer 3

我做的是比较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>