使用 Jquery 将 iframe 调整为内容 [英] Resize iframe to content with Jquery
问题描述
我正在尝试动态调整 iframe 的大小以适应其内容.为此,我有一段代码:
I'm trying to resize an iframe dynamicly to fit its content. To do so I have a piece of code:
$("#IframeId").height($("#IframeId").contents().find("html").height());
它不起作用.是因为跨域问题吗?我如何让它适合?请看一下 Fiddle:JsFiddle
It doesnt work. Is it because of cross-domain issue? How do I get it to fit? Please take a look at Fiddle: JsFiddle
ps 我已经设置了链接的 html 和 body height:100%;
ps I have set the html and body of the link height:100%;
推荐答案
你只需要在 iframe load
事件上应用你的代码,所以当时高度已经知道了,代码如下:
You just need to apply your code on the iframe load
event, so the height is already known at that time, code follows:
$("#IframeId").load(function() {
$(this).height( $(this).contents().find("body").height() );
});
参见演示.这个演示在 jsfiddle 上工作,因为我已将 iframe url 设置为与 jsfiddle 结果 iframe 相同域中的 url,即 fiddle.jshell.net
域.
See working demo . This demo works on jsfiddle as I've set the iframe url to a url in the same domain as the jsfiddle result iframe, that is, the fiddle.jshell.net
domain.
更新:
@尤斯:似乎您的页面出于奇怪的原因没有正确设置主体高度,因此请尝试使用主要元素的高度,如下所示:
UPDATE:
@Youss:
It seems your page for a strange reason don't get the body height right, so try using the height of the main elements instead, like this:
$(document).ready(function() {
$("#IframeId").load(function() {
var h = $(this).contents().find("ul.jq-text").height();
h += $(this).contents().find("#form1").height();
$(this).height( h );
});
});
这篇关于使用 Jquery 将 iframe 调整为内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!