ホームページ > 記事 > ウェブフロントエンド > HTMLでiframeを使用するにはどうすればよいですか?
HTMLでiframeを使用するにはどうすればよいですか?
- 青灯夜游オリジナル
- 2018-09-13 16:14:302201ブラウズ
この章では、HTML での iframe の使用方法を誰もが理解できるように、HTML での iframe の使用方法を紹介します。困っている友人は参考にしていただければ幸いです。
iframe は最もエネルギー消費の高い要素であるため、できるだけ使用しないでくださいという人もいます。また、iframe のセキュリティが低すぎるため、できるだけ使用しないでくださいという人もいます。彼らの言うことは真実ですが、iframe の威力は無視できず、現在でも iframe を使用している企業は後を絶ちません。
すべての主要なブラウザは d5ba1642137c3f32f4f4493ae923989c タグをサポートしています。 d5ba1642137c3f32f4f4493ae923989c と 065276f04003e4622c4fe6b64f465b88 の中にプロンプト テキストを配置すると、d5ba1642137c3f32f4f4493ae923989c をサポートしていないブラウザでもプロンプト テキストが表示されます。
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: d5ba1642137c3f32f4f4493ae923989cの名前を指定します。
width: d5ba1642137c3f32f4f4493ae923989c の幅を指定します。
高さ: d5ba1642137c3f32f4f4493ae923989c の高さを指定します。
src: d5ba1642137c3f32f4f4493ae923989c に表示されるドキュメントの URL を指定します。
Frameborder: d5ba1642137c3f32f4f4493ae923989c の周囲に境界線を表示するかどうかを指定します。 (0 は境界なし、1 ビットには境界があることを意味します)。(左、右、上、中、下)。
スクロール: d5ba1642137c3f32f4f4493ae923989c にスクロール バーを表示するかどうかを指定します。 (はい、いいえ、自動)
上記のコードの 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 サイトの他の関連記事を参照してください。