HTMLでiframeを使用するにはどうすればよいですか?
この章では、HTML での iframe の使用方法を誰もが理解できるように、HTML での iframe の使用方法を紹介します。困っている友人は参考にしていただければ幸いです。
iframe は最もエネルギー消費の高い要素であるため、できるだけ使用しないでくださいという人もいます。また、iframe のセキュリティが低すぎるため、できるだけ使用しないでくださいという人もいます。彼らの言うことは真実ですが、iframe の威力は無視できず、現在でも iframe を使用している企業は後を絶ちません。
すべての主要なブラウザは
iframe の使用方法?
通常、iframe タグで指定された src をページに直接埋め込むには iframe を使用します。
例:
<!-- <iframe> 标签规定一个内联框架 这里写p 标签是为了看align的效果 --> <p style="overflow: hidden;">这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。 <iframe name="myiframe" id="myrame" src="external_file.html" frameborder="0" align="left" width="200" height="200" scrolling="no"> <p>你的浏览器不支持iframe标签</p> </iframe> 这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。</p>
iframeの共通属性:
name:
width:
高さ:
src:
Frameborder:
スクロール:
上記のコードの iframe の src 属性は、ローカル HTML ページです コードは次のとおりです:
<body> <div id="div" style="height: 300px; background: #ddd;">这是一个外部文件里面的内容</div> </body> <script> var div = document.getElementById("div"); console.log(div); </script>
インタラクティブな部分もこのページに書き込まれます, iframe インポートされたページに自動的に転送されます。
では、iframe 内のコンテンツを取得するにはどうすればよいでしょうか?
var iframe = document.getElementById("myrame"); //获取iframe标签 var iwindow = iframe.contentWindow; //获取iframe的window对象 var idoc = iwindow.document; //获取iframe的document对象 console.log(idoc.documentElement); //获取iframe的html console.log("body",idoc.body);
ただし、内部のDOMはURL(つまりインポートされたHTMLファイル)から取得できます
iframeのメリットとデメリット
メリット:
ページをリロードするときに、ページ全体をリロードする必要はありません。ページ内のフレーム ページをリロードするだけで済みます (データ送信が削減され、Web ページのロード時間が短縮されます)。 テクノロジーはシンプルです。使いやすく、検索エンジンで検索する必要がない場合に主に使用されます。 開発に便利で、コードの重複率が減少します。 大量のページが生成されるため、管理が容易ではありません。マルチフレーム ページでは、サービスの HTTP リクエストが増加します。
ブラウザの戻るボタンが無効になるなど。以上がHTMLでiframeを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
