この章では、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 サイトの他の関連記事を参照してください。