跨域iframe调整器
cross-domain iframe resizer?
我正在寻找一个很好的跨域iframe调整大小脚本,根据其内容调整其高度。我有访问html/css的iframe的来源,以及。外面有吗?
如果你的用户使用的是现代浏览器,你可以用HTML5中的postMessage很容易地解决这个问题。下面是一个有效的快速解决方案:
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>
没有找到一个解决方案来处理所有不同的用例,我最终写了一个简单的js库,支持宽度和高度,在一个页面上调整内容大小和多个iframe。
https://github.com/davidjbradshaw/iframe-resizerEasyXDM可以做到这一点:)这篇博文解释了它的要点
本页上的第一个脚本-在HTML5中使用postMessage的脚本-也适用于移动设备上的iframe -通过调整iframe的大小到内容-例如跨域联合-您可以轻松地在iphone或android中滚动,以一种不可能的方式与iframe,否则
经过一些研究,我最终使用html5的消息传递机制包装在一个jQuery插件,使其兼容旧的浏览器使用各种方法(其中一些描述在这个线程)。
最终的解决方案很简单。
在主机(父)页面:
// 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
);
});
我在Chrome 13+、Firefox 3.6+、IE7、ie8和ie9 (XP和W7)、safari (OSX和W7)上进行了测试。div;)
我有一个完全不同的跨域iframe调整大小的解决方案。它包括获取目标页面的副本,将其放入iframe中,在本地编写,然后将该副本放入iframe中,并根据对框架内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>
下面的代码为我工作:
var iframe = document.getElementById(id);
iframe.height = iframe.contentDocument.body.scrollHeight;
在Opera 11, ie8, ie8, Chrome 16上测试
- 字体调整器(如果不是)
- 使用src调整HTML Iframe的大小我可以't控制
- Youtube播放器iframe嵌入不适用于我的频道
- 您是否需要“名称.html”来调整EasyXDM iFrame的大小
- 如何调整 SSL iframe 动态高度
- 非动态插入 YouTube 播放器 iframe 不会触发事件
- JQuery 图像调整器和文本操纵器
- iframe调整器不起作用/源页面甚至无法滚动
- 为什么获胜'我的UIWebView显示了一个Javascript YouTube播放器iFrame
- 使用iFrame调整器时,填充到调整大小的iFrame的顶部
- 可以't使用jquery-ui.js通过鼠标调整分层iframe的大小
- 为YouTube播放器iframe API寻找活动
- YouTube播放器iframe API:播放视频没有'我不适用于Firefox 9.0.1
- 未定义Iframe调整器
- 图像地图调整器不起作用
- 使用Youtube播放器IFrame API添加视频到播放列表
- @davidjbradshaw's iframe调整器在移动浏览器中不能正常工作
- IFrame调整器没有调整大小
- Iframe调整器没有调整大小
- 跨域iframe调整器