设置html iframe的高宽自动,html - 让iframe根据内容自动调整高度而不使用滚动条？...

最新推荐文章于 2024-08-20 23:46:15 发布

用户甲

最新推荐文章于 2024-08-20 23:46:15 发布

阅读量770

点赞数 1

文章标签：设置html iframe的高宽自动

html - 让iframe根据内容自动调整高度而不使用滚动条？

这个问题在这里已有答案：

调整iframe的宽度和高度以适应其中的内容 27个答案

例如：

frameborder="0" scrolling="no" id="iframe"> ...

我希望它能够根据其中的内容调整其高度，而不使用滚动。

17个解决方案

552 votes

将其添加到您的

部分：

function resizeIframe(obj) {

obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';

}

并将您的iframe更改为：

如在sitepoint讨论中找到的那样。

hjpotter92 answered 2019-01-04T15:46:54Z

77 votes

您可以使用此库，它们最初都会正确调整iframe的大小，并通过检测iframe内容的大小(通过setInterval中的常规检查或通过MutationObserver)进行更改并调整大小来保持正确的大小。

[https://github.com/davidjbradshaw/iframe-resizer]

这适用于跨域和相同的域iframe。

user2684310 answered 2019-01-04T15:47:33Z

36 votes

hjpotter92的建议在safari中不起作用！我对脚本进行了一些小调整，所以它现在也适用于Safari。

只有更改是在每次加载时将高度重置为0，以便使某些浏览器降低高度。

添加到onload标签：

function resizeIframe(obj){

obj.style.height = 0;

obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';

}

并将以下onload属性添加到您的iframe，就像这样

Allan P answered 2019-01-04T15:48:33Z

32 votes

这是一个紧凑版本：

οnlοad="this.style.height=this.contentDocument.body.scrollHeight +'px';">

Chong Lip Phang answered 2019-01-04T15:48:55Z

12 votes

在某些情况下，hjpotter92的答案运行得很好，但我发现iframe内容经常在Firefox＆amp; IE，虽然Chrome很好。

以下适用于我并修复剪辑问题。代码可以在[http://www.dyn-web.com/tutorials/iframes/height/。]找到。我做了一些修改，将onload属性从HTML中删除。将以下代码放在

HTML之后和结束onload标记之前：

function getDocHeight(doc) {

doc = doc || document;

// stackoverflow.com/questions/1145850/

var body = doc.body, html = doc.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight,

html.clientHeight, html.scrollHeight, html.offsetHeight );

return height;

}

function setIframeHeight(id) {

var ifrm = document.getElementById(id);

var doc = ifrm.contentDocument? ifrm.contentDocument:

ifrm.contentWindow.document;

ifrm.style.visibility = 'hidden';

ifrm.style.height = "10px"; // reset to minimal height ...

// IE opt. for bing/msn needs a bit added or scrollbar appears

ifrm.style.height = getDocHeight( doc ) + 4 + "px";

ifrm.style.visibility = 'visible';

}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly

setIframeHeight(this.id);

}

您的iframe HTML：

请注意，如果您希望在文档的

中包含Javascript，则可以恢复使用iframe HTML中的内联onload属性，就像在dyn-web网页中一样。

Jimadine answered 2019-01-04T15:49:41Z

12 votes

避免使用内联JavaScript; 你可以使用一个类：

并使用jQuery引用它：

$('.iframe-full-height').on('load', function(){

this.style.height=this.contentDocument.body.scrollHeight +'px';

});

rybo111 answered 2019-01-04T15:50:11Z

5 votes

jQuery .contents()方法方法允许我们搜索DOM树中元素的直接子元素。

jQuery的：

$('iframe').height( $('iframe').contents().outerHeight() );

请记住，iframe内部页面的主体必须具有高度

CSS：

body {

height: auto;

overflow: auto

}

Nathalia Xavier answered 2019-01-04T15:50:47Z

2 votes

这适用于我(在一个页面上也有多个iframe)：

$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});

user2992220 answered 2019-01-04T15:51:10Z

2 votes

这适用于我(大多数情况下)。

把它放在页面的底部。

jQuery('iframe').iframeAutoHeight();

$(window).load(

function() {

jQuery('iframe').iframeAutoHeight();

}

);

// for when content is not html e.g. a PDF

function setIframeHeight() {

$('.iframe_fullHeight').each(

function (i, item) {

item.height = $(document).height();

}

);

};

$(document).ready( function () {

setIframeHeight();

});

$(window).resize( function () {

setIframeHeight();

});

上半部分来自???，当iframe中有html时可以使用。当iframes类为iframe_fullHeight时，后半部分将iframe设置为页面高度(不是内容高度)。如果内容是PDF或其他类似内容，则可以使用此项，但您必须设置类。也只能在全高度合适时使用。

注意：由于某种原因，在窗口调整大小后重新计算时，它会出现高度错误。

ctrl-alt-delor answered 2019-01-04T15:51:54Z

1 votes

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";

}

将此添加到您的iframe：的οnlοad= “AUTORESIZE( 'youriframeid')”

Simon answered 2019-01-04T15:52:17Z

1 votes

jq2('#stocks_iframe').load(function(){

var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ;

jq2('#stocks_iframe').css('height',iframe_width); });

Айдън Бейтулов answered 2019-01-04T15:52:32Z

1 votes

试试这个IE11

...

Lucky answered 2019-01-04T15:52:55Z

0 votes

我在过去遇到问题，为动态创建的iframe调用iframe.onload，所以我采用这种方法来设置iframe大小：

iFrame视图

var height = $("body").outerHeight();

parent.SetIFrameHeight(height);

主视图

SetIFrameHeight = function(height) {

$("#iFrameWrapper").height(height);

}

(只有在两个视图位于同一个域中时才会起作用)

Owen answered 2019-01-04T15:53:38Z

0 votes

我是用AngularJS做的。 Angular没有ng-load，但是制作了第三方模块; 安装下面的凉亭，或在这里找到它：[https://github.com/andrefarzat/ng-load]

获取ngLoad指令：bower install ng-load --save

设置你的iframe：

控制器resizeIframe功能：

$scope.resizeIframe = function (event) {

console.log("iframe loaded!");

var iframe = event.target;

iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';

};

Charles Naccio answered 2019-01-04T15:54:22Z

-2 votes

function resizeIframe(obj) {

obj.style.height = 0;

obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';

}

这不适用于chrome。但是为firefox工作。

santoshs answered 2019-01-04T15:54:44Z

-2 votes

我想让iframe表现得像普通页面(我需要在iframe元素中制作一个全屏横幅)，所以这是我的脚本：

(function (window, undefined) {

var frame,

lastKnownFrameHeight = 0,

maxFrameLoadedTries = 5,

maxResizeCheckTries = 20;

//Resize iframe on window resize

addEvent(window, 'resize', resizeFrame);

var iframeCheckInterval = window.setInterval(function () {

maxFrameLoadedTries--;

var frames = document.getElementsByTagName('iframe');

if (maxFrameLoadedTries == 0 || frames.length) {

clearInterval(iframeCheckInterval);

frame = frames[0];

addEvent(frame, 'load', resizeFrame);

var resizeCheckInterval = setInterval(function () {

resizeFrame();

maxResizeCheckTries--;

if (maxResizeCheckTries == 0) {

clearInterval(resizeCheckInterval);

}

}, 1000);

resizeFrame();

}

}, 500);

function resizeFrame() {

if (frame) {

var frameHeight = frame.contentWindow.document.body.scrollHeight;

if (frameHeight !== lastKnownFrameHeight) {

lastKnownFrameHeight = frameHeight;

var viewportWidth = document.documentElement.clientWidth;

if (document.compatMode && document.compatMode === 'BackCompat') {

viewportWidth = document.body.clientWidth;

}

frame.setAttribute('width', viewportWidth);

frame.setAttribute('height', lastKnownFrameHeight);

frame.style.width = viewportWidth + 'px';

frame.style.height = frameHeight + 'px';

}

//--------------------------------------------------------------

// Cross-browser helpers

//--------------------------------------------------------------

function addEvent(elem, event, fn) {

if (elem.addEventListener) {

elem.addEventListener(event, fn, false);

} else {

elem.attachEvent("on" + event, function () {

return (fn.call(elem, window.event));

});

}

})(window);

这些功能不言自明，并有进一步解释其目的的评论。

Христо Панайотов answered 2019-01-04T15:55:13Z

-3 votes

此选项将100％工作

Vijay Chouhan answered 2019-01-04T15:55:36Z