iframeでaspxウェブページを読み込んでいます。iframe 内のコンテンツは、iframe の高さを超えることができます。iframeにはスクロールバーがあってはなりません。
iframe内にはラッパーdiv
タグがあり、基本的にこれがすべてのコンテンツです。 リサイズを実現するためにjQueryを書いた:
$("#TB_window", window.parent.document).height($("body").height() + 50);
ここで
TB_windowは
Iframe` が含まれる div です。
body` - iframe 内の aspx の body タグ。
このスクリプトは iframe のコンテンツに添付される。親ページから TB_window
要素を取得しています。これはChromeでは問題なく動作しますが、FirefoxではTB_windowが崩れてしまいます。なぜそうなるのか、本当に混乱しています。
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
タグ上で次のようにハンドラをフックする:
<iframe id="idIframe" onload="iframeLoaded()" ...
しばらく前に、フォームの送信後に IFRAME
自体から iframeLoaded
を呼び出す必要が生じたことがありました。この場合、IFRAME
'内のコンテンツスクリプトで次のようにします:
parent.iframeLoaded();
アリストスへの少し改良された答え...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
そして、iframeの中で次のように宣言します:
<iframe onload="resizeIframe(this)" ...
細かい改良点が2つある:
1.document.getElementByIdで要素を取得する必要がなくなりました。 2.2. iframe.height = ""`を設定する必要がなくなりました。DOM要素を扱っているのですから。
編集 フレーム内のコンテンツが常に変化している場合は、次のように呼び出します:
parent.resizeIframe(this.frameElement);
を呼び出します。同じオリジンで動作します。
または自動検出:
// 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);
X-FRAME-OPTIONS:Allow-From [safariまたはchromeではサポートされていません](https://developer.mozilla.org/en-US/docs/HTTP / X-Frame-Options)。 代わりに別のアプローチに行きました。DisqusのBen Vinegarによって与えられたプレゼンテーションにあります。 アイデアは、イベントリスナーを親ウィンドウに追加し、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内で、onLoadをボディタグに追加して、サイズ変更機能を実行します。
<body onLoad="resize();">
iFrameでコンテンツの高さを取得するために確認できる4つの異なるプロパティがあります。
document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight
悲しいことに、それらはすべて異なる答えを出すことができ、これらはブラウザ間で一貫していません。 ボディマージンを0に設定すると、「document.body.offsetHeight」が最良の答えを示します。 正しい値を取得するには、この関数を試してください。これは、 iframe-resizerライブラリから取得されます。ライブラリは、コンテンツが変更されたときに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');
}
resizeIframeに繰り返しrequestAnimationFrameを追加することもできます(例:. @BlueFishの回答から)ブラウザがレイアウトをペイントする前に常に呼び出され、コンテンツの高さが変更された場合にiframeの高さを更新できます。 例えば. 入力フォーム、遅延読み込みコンテンツなど.
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
window.requestAnimationFrame(() => resizeIframe(iframe));
}
</script>
<iframe onload="resizeIframe(this)" ...
コールバックは、全体的なパフォーマンスに大きな影響を与えないように十分に高速である必要があります。
関連する質問はこちらから参照できます-https://stackoverflow.com/questions/18765762/how-to-make-width-and-height-of-iframe-same-as-its-parent-div/38917939# 38917939。
動的高さを設定するには-。
1。 クロストメインのiFramesと親と通信する必要があります。 2。 次に、iframeのスクロールの高さ/コンテンツの高さを親ウィンドウに送信できます。
そしてコード-https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8。
javscript / jqueryを使用するのではなく、私が見つけた最も簡単な方法は次のとおりです。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>
<。!-終了スニペット-->。
ここで1vh =ブラウザウィンドウの高さの1%。 したがって、設定する高さの理論値は100vhですが、実際には98vhが魔法をかけました。
PHP htmlspecialchars()を使用したサンプル+高さが存在し、>かどうかを確認します。 0:
<。!-スニペットを開始:js hide:false console:true babel:false -->。
$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';
<。!-終了スニペット-->。
トロイからの答えはうまくいかなかった。 これは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' );
}
});
これは、jqueryのないソリューションが必要な場合に役立ちます。 その場合は、コンテナを追加して、パディングをパーセンテージで設定してください。
HTMLサンプルコード:
<div class="iframecontainer">
<iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>
CSS例コード:
.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%;
}
BlueFishに対する回答が少し改善されました。..
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";
}
これには、レスポンシブデザインに適したウィンドウ画面(ブラウザ、電話)の高さと、高さの高いiframeが考慮されます。 パディングは、画面全体を通過する場合に、iframeの上下に必要なパディングを表します。
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);
});
$(document).height() // - $('body').offset().top
および/または
$(window).height()
スタックオーバーフローの質問 https://stackoverflow.com/questions/806402 を参照してください。
jQueryでボディの高さを求めるには、これを試してみてください:
if $("body").height()
Firebug]1の場合は値がありません。おそらくこれが問題なのでしょう。