のとを自動調整して、そのコンテンツにかろうじて収まるようにするソリューションが必要です。ポイントは、ロード後に幅と高さを変更できることです。iframe に含まれるボディの寸法の変更に対処するには、イベント アクションが必要だと思います。widthheightiframeiframe
790041 次
33 に答える
298
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
于 2009-05-04T09:33:39.443 に答える
50
クロスブラウザjQuery プラグイン。
コンテンツに合わせて iFrame のサイズを維持し、iFrame とホスト ページの間で通信するために使用する、クロスボウサー、クロス ドメインライブラリ。jQuery の有無にかかわらず動作します。mutationObserverpostMessage
于 2010-10-04T09:09:33.507 に答える
37
これまでに提供されたすべてのソリューションは、1回限りのサイズ変更のみを考慮しています。コンテンツが変更された後にiFrameのサイズを変更できるようにしたいとおっしゃっています。これを行うには、iFrame内で関数を実行する必要があります（内容が変更されたら、内容が変更されたことを通知するイベントを発生させる必要があります）。
iFrame内のコードはiFrame内のDOMに限定されているように見え（そしてiFrameを編集できなかった）、iFrame外で実行されたコードはiFrame外のDOMでスタックした（そしてできなかった）ので、私はしばらくこれに固執しましたt iFrame内からのイベントをピックアップします）。
解決策は、jQueryがどのDOMを使用するかを指示できることを（同僚の支援を介して）発見することから生まれました。この場合、親ウィンドウのDOMです。
そのため、このようなコードは必要なことを実行します（iFrame内で実行する場合）：
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#IDofControlFiringResizeEvent").click(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
});
</script>
于 2012-06-15T10:05:33.137 に答える
30
iframeコンテンツが同じドメインからのものである場合、これはうまく機能するはずです。ただし、jQueryは必要です。
$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});
動的にサイズを変更するには、次のようにします。
<script language="javaScript">
<!--
function autoResize(){
$('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>
次に、iframeがロードするページにこれを追加します。
<script language="javaScript">
function resize()
{
window.parent.autoResize();
}
$(window).on('resize', resize);
</script>
于 2012-08-01T15:17:59.777 に答える
16
jQuery を使用したくない場合のクロスブラウザー ソリューションを次に示します。
/**
* Resizes the given iFrame width so it fits its content
* @param e The iframe to resize
*/
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}
于 2011-01-17T12:29:11.790 に答える
8
このコードを使用して、ページにロードするときにすべての iframe (クラス autoHeight を使用) の高さを自動調整しています。テスト済みで、IE、FF、Chrome、Safari、Opera で動作します。
function doIframe() {
var $iframes = $("iframe.autoHeight");
$iframes.each(function() {
var iframe = this;
$(iframe).load(function() {
setHeight(iframe);
});
});
}
function setHeight(e) {
e.height = e.contentWindow.document.body.scrollHeight + 35;
}
$(window).load(function() {
doIframe();
});
于 2012-10-01T11:27:54.553 に答える
8
地球上のすべてを試した後、これは本当にうまくいきます。
index.html
<style type="text/css">
html, body{
width:100%;
height:100%;
overflow:hidden;
margin:0px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>
<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>
于 2016-04-07T15:18:38.507 に答える
5
これは確実な解決策です
function resizer(id)
{
var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;
var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;
}
html
<IFRAME SRC="blah.php" id="iframe1" onLoad="resizer('iframe1');"></iframe>
于 2013-11-06T03:09:57.430 に答える
3
上記の Garnaph の優れたソリューションを少し変更しました。彼のソリューションは、イベントの直前のサイズに基づいて iframe のサイズを変更したようです。私の状況 (iframe 経由の電子メール送信) では、送信直後に iframe の高さを変更する必要がありました。たとえば、送信後に検証エラーや「ありがとう」メッセージを表示します。
ネストされた click() 関数を削除して、iframe html に入れました。
<script type="text/javascript">
jQuery(document).ready(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
</script>
私にとってはうまくいきましたが、クロスブラウザ機能についてはわかりません。
于 2012-07-11T06:22:41.577 に答える
2
上記の方法を使用してもすべて機能しません。
JavaScript:
function resizer(id) {
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;
var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);
document.getElementById(id).style.height = height;
document.getElementById(id).style.width = width;
}
html:
<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv" >
<input id="txtHeight"/>height <input id="txtWidth"/>width
<iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0" ></iframe>
<iframe src="left.aspx" name="leftFrame" scrolling="yes" id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
<iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; " onload="resizer('Iframe2');" ></iframe>
</div>
環境: IE 10、Windows 7 x64
于 2013-12-19T03:46:09.157 に答える
1
そこになかったように動作する「ゴーストのような」IFrameを作成することができます。
http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/を参照してください
基本的には、 https：//developer.mozilla.org/en-US/docs/DOM/window.postMessageparent.postMessage(..)で説明され
ているイベントシステムを使用します
これはすべての最新のブラウザで動作します！
于 2013-02-22T13:03:03.403 に答える
1
誰かがここにたどり着いた場合:iframeからdivを削除したときに解決策に問題がありました-iframeは短くなりませんでした。
仕事をするJqueryプラグインがあります：
http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
于 2014-12-17T00:23:26.007 に答える
1
このリサイザーの方がうまく機能することがわかりました：
function resizer(id)
{
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body;
var html_ = doc.documentElement;
var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
document.getElementById(id).height = height;
document.getElementById(id).width = width;
}
スタイル オブジェクトが削除されていることに注意してください。
于 2014-08-13T06:46:17.853 に答える
1
function resizeIFrameToFitContent(frame) {
if (frame == null) {
return true;
}
var docEl = null;
var isFirefox = navigator.userAgent.search("Firefox") >= 0;
if (isFirefox && frame.contentDocument != null) {
docEl = frame.contentDocument.documentElement;
} else if (frame.contentWindow != null) {
docEl = frame.contentWindow.document.body;
}
if (docEl == null) {
return;
}
var maxWidth = docEl.scrollWidth;
var maxHeight = (isFirefox ? (docEl.offsetHeight + 15) : (docEl.scrollHeight + 45));
frame.width = maxWidth;
frame.height = maxHeight;
frame.style.width = frame.width + "px";
frame.style.height = frame.height + "px";
if (maxHeight > 20) {
frame.height = maxHeight;
frame.style.height = frame.height + "px";
} else {
frame.style.height = "100%";
}
if (maxWidth > 0) {
frame.width = maxWidth;
frame.style.width = frame.width + "px";
} else {
frame.style.width = "100%";
}
}
iframe スタイル:
.myIFrameStyle {
float: left;
clear: both;
width: 100%;
height: 200px;
padding: 5px;
margin: 0px;
border: 1px solid gray;
overflow: hidden;
}
iframe タグ:
<iframe id="myIframe" src="" class="myIFrameStyle"> </iframe>
スクリプトタグ:
<script type="text/javascript">
$(document).ready(function () {
$('myIFrame').load(function () {
resizeIFrameToFitContent(this);
});
});
</script>
于 2020-07-01T08:19:50.900 に答える
1
固定アスペクト比で生活でき、レスポンシブな iframeが必要な場合は、このコードが役立ちます。それは単なるCSSルールです。
.iframe-container {
overflow: hidden;
/* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16=
0.5625) */
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
iframe には、コンテナとして div が必要です。
<div class="iframe-container">
<iframe src="http://example.org"></iframe>
</div>
ソース コードはこのサイトに基づいており、Ben Marshallが適切に説明しています。
于 2020-03-03T19:28:51.093 に答える
0
ヘッダーに配置する Javascript:
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
iframe html コードは次のとおりです。
<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>
CSS スタイルシート
>
.spec_iframe {
width: 100%;
overflow: hidden;
}
于 2016-02-27T05:55:23.667 に答える
0
これは私がそれを行う方法です（FF / Chromeでテスト済み）：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>
<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>
于 2013-05-14T10:27:59.297 に答える
0
以下にいくつかの方法を示します。
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
そして別の選択肢
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
上記の 2 つの代替方法でスクロールを非表示にするには
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
セカンドコードでハッキング
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
iFrame のスクロール バーを非表示にするには、親を「overflow:hidden」にしてスクロール バーを非表示にし、iFrame の幅と高さを最大 150% にして、ページの外側にスクロール バーを配置します。スクロールバーがあると、iframe がページの境界を超えるとは思わないかもしれません。これにより、iFrame のスクロールバーが全幅で非表示になります。
ソース: iframe の自動高さを設定
于 2013-06-27T12:32:32.617 に答える
-1
<iframe src="hello.html" sandbox="allow-same-origin"
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>
于 2016-09-09T03:02:38.850 に答える
-1
シンプルさ :
var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});
于 2016-07-21T08:15:47.463 に答える