使iframe高度基于内部内容动态-JQUERY/Javascript
我正在iframe中加载一个aspx网页。Iframe中的内容可以比Iframe的高度更高。iframe不应具有滚动条 我在iframe中有一个wrapper使iframe高度基于内部内容动态-JQUERY/Javascript,javascript,jquery,asp.net,iframe,Javascript,Jquery,Asp.net,Iframe,我正在iframe中加载一个aspx网页。Iframe中的内容可以比Iframe的高度更高。iframe不应具有滚动条 我在iframe中有一个wrapperdiv标记,它基本上就是所有内容。我编写了一些jQuery以实现调整大小: $("#TB_window", window.parent.document).height($("body").height() + 50); 在哪里 tbu窗口是包含Iframe的div body-iframe中aspx的body标签 此脚本附加到iframe
div
标记,它基本上就是所有内容。我编写了一些jQuery以实现调整大小:
$("#TB_window", window.parent.document).height($("body").height() + 50);
在哪里
tbu窗口
是包含Iframe
的div
body
-iframe中aspx的body标签
此脚本附加到iframe内容。我正在从父页面获取
tbu窗口
元素。虽然这在Chrome上运行良好,但在Firefox中TB_窗口会崩溃。我真的不明白为什么会发生这种情况。您可以使用以下方法检索IFRAME
内容的高度:
contentWindow.document.body.scrollHeight
加载IFRAME
后,您可以通过执行以下操作更改高度:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
不久前我遇到过这样一种情况,在内部发生表单提交后,我还需要从IFRAME
本身调用iframeload
。您可以通过在IFRAME
的内容脚本中执行以下操作来实现这一点:
parent.iframeLoaded();
和/或
$(window).height()
请参阅堆栈溢出问题
尝试以下操作以在jQuery中查找主体的高度:
if $("body").height()
它没有一个值,如果。也许这就是问题所在。对亚里士多德的回答稍微有点改进
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
从更新后的iframe中。为同一来源工作
或自动检测:
// on resize
this.container = this.frameElement.contentWindow.document.body;
this.watch = () => {
cancelAnimationFrame(this.watcher);
if (this.lastScrollHeight !== container.scrollHeight) {
parent.resizeIframeToContentSize(this.frameElement);
}
this.lastScrollHeight = container.scrollHeight;
this.watcher = requestAnimationFrame(this.watch);
};
this.watcher = window.requestAnimationFrame(this.watch);
我发现特洛伊的答案不起作用。这与为ajax重新编写的代码相同:
$.ajax({
url: 'data.php',
dataType: 'json',
success: function(data)
{
// Put the data onto the page
// Resize the iframe
var iframe = $(window.top.document).find("#iframe");
iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
}
});
要添加到底部似乎被切断的窗口块中,尤其是当您没有我使用的滚动时:
function resizeIframe(iframe) {
var addHeight = 20; //or whatever size is being cut off
iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
}
您可以查看四种不同的属性来获取iFrame中内容的高度
document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight
可悲的是,它们都可以给出不同的答案,而这些答案在浏览器之间并不一致。如果将正文边距设置为0,则document.body.offsetHeight
将给出最佳答案。要获得正确的值,请尝试此函数;它取自库,该库还负责在内容更改或浏览器调整大小时保持iFrame的正确大小
function getIFrameHeight(){
function getComputedBodyStyle(prop) {
function getPixelValue(value) {
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) {
return parseInt(value,base);
}
var
style = el.style.left,
runtimeStyle = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft;
el.style.left = style;
el.runtimeStyle.left = runtimeStyle;
return value;
}
var
el = document.body,
retVal = 0;
if (document.defaultView && document.defaultView.getComputedStyle) {
retVal = document.defaultView.getComputedStyle(el, null)[prop];
} else {//IE8 & below
retVal = getPixelValue(el.currentStyle[prop]);
}
return parseInt(retVal,10);
}
return document.body.offsetHeight +
getComputedBodyStyle('marginTop') +
getComputedBodyStyle('marginBottom');
}
我发现接受的答案是不够的,因为X-FRAME-OPTIONS:Allow From。取而代之的是一种不同的方法,这是在Discus公司的Ben醋中发现的。其思想是向父窗口添加一个事件侦听器,然后在iframe内部,使用window.postMessage向父窗口发送一个事件,告诉它做些什么(调整iframe的大小) 因此,在父文档中,添加一个事件侦听器:
window.addEventListener('message', function(e) {
var $iframe = jQuery("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
$iframe.height(data);
break;
}
}, false);
在iframe中,编写一个函数来发布消息:
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
最后,在iframe内部,向body标记添加一个onLoad以启动调整大小功能:
<body onLoad="resize();">
将此添加到iframe,这对我很有用:
onload="this.height=this.contentWindow.document.body.scrollHeight;"
如果使用jQuery,请尝试以下代码:
onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
你可在此查阅有关问题- 设置动态高度的步骤-
和代码-当您需要一个没有jquery的解决方案时,此选项非常有用。在这种情况下,您应该尝试添加一个容器,并以百分比为单位设置填充 HTML示例代码:
<div class="iframecontainer">
<iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>
.iframeclass{
position: absolute;
top: 0;
width: 100%;
}
.iframecontainer{
position: relative;
width: 100%;
height: auto;
padding-top: 61%;
}
简单的解决方案是测量内容区域的宽度和高度,然后使用这些测量值计算底部填充百分比 在这种情况下,测量值为1680 x 720 px,因此底部的填充为720/1680=0.43*100,即43%
.canvas-container {
position: relative;
padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
height: 0;
overflow: hidden;
}
.canvas-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
对蓝鱼的一个稍微改进的答案
function resizeIframe(iframe) {
var padding = 50;
if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
else
iframe.height = (window.innerHeight - padding) + "px";
}
函数resizeIframe(iframe){
var=50;
if(iframe.contentWindow.document.body.scrollHeight<(window.innerHeight-填充))
iframe.height=iframe.contentWindow.document.body.scrollHeight+“px”;
其他的
iframe.height=(window.innerHeight-padding)+“px”;
}
这考虑了windows屏幕(浏览器、手机)的高度,这有利于响应性设计和具有巨大高度的iFrame。
Padding表示在iframe穿过整个屏幕时,在iframe的上方和下方所需的填充 jQuery('.home\u vidio\u img1 img')。单击(函数(){
jQuery('.home_vidio_img1 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery(this).replaceWith(video);
});
jQuery('.home_vidio_img2 img').click(function(){
video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img3 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img4 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
视频='';
jQuery(this.replaceWith)(视频);
});
jQuery('.home\u vidio\u img2 img')。单击(函数(){
视频=;
jQuery('.home\u vidio\u img1 img').replaceWith(视频);
jQuery('.home\u vidio\u img1 iframe').replaceWith(视频);
});
jQuery('.home\u vidio\u img3 img')。单击(函数(){
视频='';
jQuery('.home\u vidio\u img1 img').replaceWith(视频);
jQuery('.home\u vidio\u img1 iframe').replaceWith(视频);
});
jQuery('.home\u vidio\u img4 img')。单击(函数(){
视频='';
jQuery('.home\u vidio\u img1 img').replaceWith(视频);
jQuery('.home\u vidio\u img1 iframe').replaceWith(视频);
});
我发现最简单的方法是:
以防万一这对任何人都有帮助。为了让它发挥作用,我竭尽全力,然后我注意到iframe有一个高度为100%的类条目。当我移除这个时,一切都按预期进行。因此,请检查是否存在任何css冲突。您还可以将重复的requestAnimationFrame添加到resizeIframe中(例如,从@BlueFish的答案),它将始终在浏览器绘制布局之前调用,并且当iframe的内容更改其高度时,您可以更新其高度。e、 g.输入表单、延迟加载内容等
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
window.requestAnimationFrame(() => resizeIframe(iframe));
}
</script>
<iframe onload="resizeIframe(this)" ...
函数resizeIframe(iframe){
iframe.height=iframe.contentWindow.document.body.scrollHeight+“px”;
requestAnimationFrame(()=>resizeIframe(iframe));
}
其他答案对我不起作用,所以我做了一些改变。希望这会有所帮助
$('#iframe').on("load", function() {
var iframe = $(window.top.document).find("#iframe");
iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
使用PHPH的示例
function resizeIframe(iframe) {
var padding = 50;
if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
else
iframe.height = (window.innerHeight - padding) + "px";
}
jQuery('.home_vidio_img1 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery(this).replaceWith(video);
});
jQuery('.home_vidio_img2 img').click(function(){
video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img3 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img4 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
window.requestAnimationFrame(() => resizeIframe(iframe));
}
</script>
<iframe onload="resizeIframe(this)" ...
$('#iframe').on("load", function() {
var iframe = $(window.top.document).find("#iframe");
iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
<style>
.iframe-container {
display: block;
position: absolute;
/*change position as you need*/
bottom: 0;
left: 0;
right: 0;
top: 0;
}
iframe {
margin: 0;
padding: 0;
border: 0;
width: 100%;
background-color: #fff;
}
</style>
<div class="iframe-container">
<iframe src="http://iframesourcepage"></iframe>
</div>
var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'px' );
var iFrameID = document.getElementById('idIframe');
intval = setInterval(function(){
if(iFrameID.scrollHeight == iFrameID.contentWindow.document.body.scrollHeight){
clearInterval(intval);
}else{
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
},500)
<iframe src= ${cognosUrl} onload="this.style.height=(this.contentDocument.body.scrollHeight+30) +'px';" scrolling="no" style="width: 100%; min-height: 900px; border: none; overflow: hidden; height: 30px;"></iframe>