是否有一个跨域的iframe高度自动调整器的作品？
我尝试了一些解决scheme，但没有成功。 我想知道是否有一个解决scheme，最好有一个易于遵循的教程。
你有三个select：
1.使用iFrame调整器
这是一个简单的库，用于保持内容大小的iFrame。 它使用PostMessage和MutationObserver API，并支持IE8-10。 它也有内容页面的选项来请求包含的iFrame是一定的大小，也可以closures的iFrame，当你完成它。
http://davidjbradshaw.github.io/iframe-resizer/
2.使用Easy XDM（PostMessage + Flash组合）
Easy XDM使用一系列的技巧来在不同的窗口之间实现多个浏览器之间的跨域通信，并且还有一些使用iframeresize的例子：
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的解决scheme作为旧版浏览器的后备工作。
另请参阅此线程上的Stackoverflow （也有其他人，这是一个常见问题）。 另外， Facebook似乎也采用了类似的方法 。
3.通过服务器进行通信
另一个select是将iframe的高度发送到服务器，然后使用JSONP从父级网页中从该服务器进行轮询（如果可能，则使用长轮询）。
我所做的是比较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> 我得到了解决scheme，根据其内容dynamic设置iframe的高度。 这适用于跨域内容。 有一些步骤可以实现这一点。
-
假设您在“abc.com/page”网页中添加了iframe
<div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div> -
接下来，您必须在网页“abc.com/page”下绑定窗口“消息”事件，
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); } }); On iframe load you have to send message to iframe window content with "FrameHeight" message function setIframeHeight(ifrm) { var height = ifrm.contentWindow.postMessage("FrameHeight", "*"); }
这是我在这个页面的简单解决scheme。 http://lab.ohshiftlabs.com/iframesize/
下面是它的工作原理;
基本上，如果你能够编辑在其他领域的网页，你可以放置另一个属于你的服务器的iframe页面，保存高度的cookie。 更新时间间隔读取cookie时，更新iframe的高度。 就这些。
下载; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip
我发现了另一个使用PHP获取iframe大小的web dev服务器端解决scheme。
首先是通过内部函数使用服务器脚本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页面的高度只是简单的控制内容div（ iframe_reserve ）
所以我用divHeight = document.getElementById("iframe_reserve").clientHeight; 在屏蔽div容器（ iframe_reserve ）之后获得外部页面的高度。 在此之后，我们加载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/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(); } }())
然后iframe的内容可以通过使用如下脚本注入到另一个页面/站点的任何地方：
<script id="my-iframe-content-loader-script-tag" type="text/javascript" src="/js/embed-iframe-content.js" ></script>
iframe内容将被放置在放置脚本标签的任何地方。
希望这对某人有帮助。 👍
