我正在开发一个类似igoogle的应用程序。来自其他应用程序(在其他域中)的内容使用iframe显示。
我如何调整iframes的大小以适应iframes的内容的高度?
我试图破译的javascript谷歌使用,但它是模糊的,搜索网络至今一无所获。
更新:请注意,内容是从其他域加载的,因此适用同源策略。
我正在开发一个类似igoogle的应用程序。来自其他应用程序(在其他域中)的内容使用iframe显示。
我如何调整iframes的大小以适应iframes的内容的高度?
我试图破译的javascript谷歌使用,但它是模糊的,搜索网络至今一无所获。
更新:请注意,内容是从其他域加载的,因此适用同源策略。
当前回答
如果你不需要处理来自不同域的iframe内容,试试这段代码,它将完全解决问题,它很简单:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>
其他回答
如果您可以控制iframe内容,我强烈建议使用
调整观察者大小
只需在iframe的srcdoc属性的末尾插入以下内容, 如果需要,可以转义。
<script type="text/javascript">
var ro = new ResizeObserver(entries => {
for (let entry of entries) {
const cr = entry.contentRect;
// console.log(window.frameElement);
window.frameElement.style.height =cr.height +30+ "px";
}
});
ro.observe(document.body);
</script>
使用jquery加载(跨浏览器):
<iframe src="your_url" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%" width="100%"></iframe>
function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
在响应式页面中调整大小:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});
使用jQuery的最简单方法:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage() window.postMessage is a method for safely enabling cross-origin communication. Normally, scripts on different pages are only allowed to access each other if and only if the pages which executed them are at locations with the same protocol (usually both http), port number (80 being the default for http), and host (modulo document.domain being set by both pages to the same value). window.postMessage provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used. Summary window.postMessage, when called, causes a MessageEvent to be dispatched at the target window when any pending script that must be executed completes (e.g. remaining event handlers if window.postMessage is called from an event handler, previously-set pending timeouts, etc.). The MessageEvent has the type message, a data property which is set to the string value of the first argument provided to window.postMessage, an origin property corresponding to the origin of the main document in the window calling window.postMessage at the time window.postMessage was called, and a source property which is the window from which window.postMessage is called. (Other standard properties of events are present with their expected values.)
iFrame- resizzer库使用postMessage来保持iFrame的大小与其内容一致,并使用MutationObserver来检测内容的变化,而不依赖于jQuery。
https://github.com/davidjbradshaw/iframe-resizer
jQuery:跨域脚本的优点
http://benalman.com/projects/jquery-postmessage-plugin/
有调整iframe窗口大小的演示…
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
这篇文章展示了如何消除对jQuery的依赖…Plus有很多有用的信息和链接到其他解决方案。
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Barebones操作...
http://onlineaspect.com/uploads/postmessage/parent.html
HTML 5工作草案在window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
John Resig谈跨窗口消息传递
http://ejohn.org/blog/cross-window-messaging/
如果你不需要处理来自不同域的iframe内容,试试这段代码,它将完全解决问题,它很简单:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>