検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLの

HTML

インライン フレームは、現在の HTML ドキュメント内に別のドキュメントを埋め込むために使用されます。

HTML

インライン フレームをマークする: 

<iframe src="//www.w3cschool.cn"></iframe>

HTML

HTMLの<iframe>タグの使い方は？ HTML <iframe> タグの高さを調整する 4 つの簡単な方法

HTML

ページ 同じですが、いくつかの違いがあります。たとえば、システムでは、各ページの left_nav と上部のコンテンツは一貫していますが、右下のコンテンツは変化しています。

利点: ページコードの再利用率が向上し、怠け者になれます。

欠点: ページの URL アドレスは変更されていません。

iframe の高さを調整する 3 つの方法:

iframe の内容は不明ですが、高さは予測可能です

現時点では、デフォルトの CSS 最小高さの値をそれに追加し、JavaScript を使用して高さを変更できます。同時。一般的に使用される互換性のあるコードは次のとおりです:

1. (異なるサブドメインが同じトップレベル ドメイン名で情報を交換する場合は、 document.domain="caibaojian.com" を設定します)

// document.domain = "caibaojian.com";
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}}
};
window.onload = function () {
setIframeHeight(document.getElementById(&#39;external-frame&#39;));
};

2. 既知の iframe の ID を呼び出します。


上記の iframe の ID を変更するだけです。または、HTML コードを汚染しないように、コードを iframe に直接記述することもできます。通常は、上記のコードを使用することをお勧めします。 

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

3. コンテンツの幅が変更されたときの iframe の高さの調整: 

function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}

4. デバッグ実行ウィンドウを開くと、操作が表示されます: 

<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

プロンプト バー:

ヒント: に必要なテキストを配置できます。 をサポートしていないブラウザに対応します。

ヒント: CSS を使用して

以上がHTMLの