HTMLタグの使用方法? HTML<iframe> タグの高さを調整する 4 つの簡単な方法をご存知ですか?この記事では、HTML<iframe> タグの使用方法と、HTML<iframe> タグを適応させる 4 つの非常に簡単な方法を詳しく紹介します。 HTML タグとは: タグはインライン フレームを指定します。 インライン フレームは、現在の HTML ドキュメント内に別のドキュメントを埋め込むために使用されます。 HTML タグの使用方法: タグは、別のドキュメントを含むインライン フレームを作成し、別の HTML ページを現在のページに効果的に埋め込みます。次の例を参照してください: インライン フレームをマークする: ログイン後にコピーHTML タグ属性: </strong><br/></p><p><img src="https://img.php.cn//upload/image/659/725/380/1534387766737325.png" title="1534387766737325.png" alt="HTMLの<iframe>タグの使い方は？ HTML <iframe> タグの高さを調整する 4 つの簡単な方法"/></p><p>HTML<iframe> タグの基本的な使用法: <strong></strong></p>ページ 同じですが、いくつかの違いがあります。たとえば、システムでは、各ページの left_nav と上部のコンテンツは一貫していますが、右下のコンテンツは変化しています。 <p></p>利点: ページコードの再利用率が向上し、怠け者になれます。 <p></p>欠点: ページの URL アドレスは変更されていません。 <p></p><p>iframe の高さを調整する 3 つの方法: <strong></strong></p>iframe の内容は不明ですが、高さは予測可能です<p></p>現時点では、デフォルトの CSS 最小高さの値をそれに追加し、JavaScript を使用して高さを変更できます。同時。一般的に使用される互換性のあるコードは次のとおりです: <p></p>1. (異なるサブドメインが同じトップレベル ドメイン名で情報を交換する場合は、 document.domain="caibaojian.com" を設定します)<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">// 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('external-frame')); };</pre><div class="contentsignin">ログイン後にコピー</div></div></p>2. 既知の iframe の ID を呼び出します。 <p><br/></p> 上記の iframe の ID を変更するだけです。または、HTML コードを汚染しないように、コードを iframe に直接記述することもできます。通常は、上記のコードを使用することをお勧めします。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)">ログイン後にコピー3. コンテンツの幅が変更されたときの iframe の高さの調整: function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) }ログイン後にコピー4. デバッグ実行ウィンドウを開くと、操作が表示されます: 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); ログイン後にコピー プロンプト バー: ヒント: に必要なテキストを配置できます。 と をサポートしていないブラウザに対応します。 ヒント: CSS を使用して (スクロールバーを含む) のスタイルを定義します。 <p></p>ヒント: <iframe> タグは主に、ナビゲーション バーや広告列など、複数の Web ページに共通する部分に使用されます。 <p></p> <p> HTML 4.01 と HTML5 の違い: <strong></strong></p>HTML5 では、HTML 4.01 のいくつかの新しい属性が追加され、いくつかの属性が削除されています。 <p></p> HTML と XHTML の違い: <p></p> XHTML では、name 属性は非推奨となり、削除される予定です。代わりに id 属性を使用してください。 <p></p>【関連おすすめ】<p></p> <p>HTML5の新しい構造要素とは何ですか? HTML5 での新しい構造要素の使用法 (推奨) <a href="http://www.php.cn/html5-tutorial-408288.html" target="_blank" title="HTML5新增的结构元素有哪些？HTML5新增的结构元素的用法（推荐）"></a><br></p> <p> HTML5 の Article タグとは何ですか? HTML5 では、article 要素はどこで使用されますか? <a href="http://www.php.cn/html5-tutorial-408349.html" target="_blank" title="HTML5中的article标签是什么？HTML5中的article元素用在什么地方？"></a><br></p> <p><br></p>
