跨域iframe调整？
我正在寻找一个良好的跨域iframe调整脚本，根据其内容调整其高度。 我也可以访问iframe的源代码的html / css。 那里有吗？
如果您的用户使用的是现代浏览器，那么可以使用HTML5中的postMessage轻松解决这个问题。 这是一个很好的解决scheme：
iframe页面：
<!DOCTYPE html> <head> </head> <body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');"> <h3>Got post?</h3> <p>Lots of stuff here which will be inside the iframe.</p> </body> </html> 包含iframe（并想知道其高度）的父页面：
<script type="text/javascript"> function resizeCrossDomainIframe(id, other_domain) { var iframe = document.getElementById(id); window.addEventListener('message', function(event) { if (event.origin !== other_domain) return; // only accept messages from the specified domain if (isNaN(event.data)) return; // only accept something which can be parsed as a number var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar iframe.height = height + "px"; }, false); } </script>
<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');"> </iframe>
没有find一个解决scheme，处理所有这些不同的使用情况，我最终编写了一个简单的js库，同时支持宽度和高度，在一个页面上调整内容和多个iframe的大小。
EasyXDM可以做到这一点:) 这个博客解释了它的要点
这个页面上的第一个脚本 – 在HTML5中使用postMessage的脚本 – 也适用于移动设备上的iframe – 通过调整内容的iframe的大小 – 例如联合跨域 – 你可以很容易地在iphones或android中滚动，否则可能与iframe
经过一番研究之后，我最终使用了包含在jQuery插件中的html5消息传递机制，使得它可以与使用各种方法（本文中描述的一些方法）的旧浏览器兼容。
最终的解决scheme非常简单。
在主机（父母）页面上：
// executes when a message is received from the iframe, to adjust // the iframe's height $.receiveMessage( function( event ){ $( 'my_iframe' ).css({ height: event.data }); }); // Please note this function could also verify event.origin and other security-related checks.
在iframe页面上：
$(function(){ // Sends a message to the parent window to tell it the height of the // iframe's body var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined); $.postMessage( $('body').outerHeight( true ) + 'px', '*', target ); });
我已经在XP和W7的Chrome 13 +，Firefox 3.6 +，IE7,8和9，OSX和W7上的Safari浏览器上testing过。 ;）
以下代码为我工作：
var iframe = document.getElementById(id); iframe.height = iframe.contentDocument.body.scrollHeight;
testing了Opera 11，IE 8 9，FF 8，Chrome 16
我有一个完全不同的解决scheme来跨域iframeresize。 它涉及到购买目标页面的副本，您将放入您的iframe，写入本地，然后将该副本放入您的iframe和resize基于相同的域访问框架内的DOM。
一个例子如下：
<?php if(isset($_GET['html'])) $blogpagehtml = file_get_contents(urldecode($_GET['html'])); else $blogpagehtml = file_get_contents('http://r****d.wordpress.com/'); $doc = new DOMDocument(); libxml_use_internal_errors(true); $doc->loadHTML($blogpagehtml); libxml_use_internal_errors(false); $anchors = $doc->getElementsByTagName("a"); foreach($anchors as $anchor) { $anchorlink=$anchor->getAttribute("href"); if(strpos($anchorlink,"http://r****d.wordpress")===false) $anchor->setAttribute("target","_top"); else $anchor->setAttribute("href","formatimportedblog.php?html=".urlencode($anchorlink)); } $newblogpagehtml = $doc->saveHTML(); $token = rand(0,50); file_put_contents('tempblog'.$token.'.html',$newblogpagehtml); ?> <iframe id='iframe1' style='width:970px;margin:0 auto;' src='tempblog<?php echo $token; ?>.html' frameborder="0" scrolling="no" onLoad="autoResize('iframe1');" height="5600"></iframe>
