JavascriptセットIframeSrc

Michael Zippo

iframe HTMLタグは、WebドキュメントをWebページに埋め込みます。埋め込まれたドキュメントは、PDF、Webページ、またはその他のリソースです。 src属性は、オンボードリソースの場所を定義します。

Webドキュメントのコンテンツを埋め込むことができます、HTMLを使用した別のページのPDFやGoogleマップの地図など。

ここで、HTML </em>が登場します。HTML<em>< iframe> </ em>タグは、他のWebページなどの外部オブジェクトを単一のWebページに埋め込むために使用されます。このチュートリアルでは、例を使用して、HTML <em> <iframe></em>タグを使用してWebリソースをWebページに埋め込む方法を説明します。</p><h2> HTMLiframe </h2> <p> HTML iframe、または埋め込みフレームは、ページに外部Webドキュメントを表示します。 HTMLの<iframe>タグを使用して、地図、PDF、ビデオ、またはその他のリソースを埋め込むことができます。</p> <p>インラインフレームに保存されているコードは、Webページの他の部分から独立しています。ウェブページに適用されるスタイルやJavaScriptはiframeには適用されません。</p><p>HTMLの<em><iframe></em>タグの構文は次のとおりです。</p> <p> <em> <iframe ></em>タグはiframeを作成するために使用されます。 iframe <em> src</em>属性を指定しました。この属性には、Webページに埋め込むHTML要素の位置が含まれています。 <a href="/url-vs-uri/"> HTMLURL</a>である必要があります。</p><h2>HTMLiframeの例</h2><p>例を見て、どのように<em> <iframe></em>タグは機能します。</p> </div> </div><p>地元の人向けのウェブサイトを構築しているとします。ワシントンDCの歴史的なビジネス。彼らは、米国憲法の誕生に関するカーンアカデミーからのビデオが埋め込まれたページを作成することを望んでいます。このページは、入社に興味のある方におすすめの資料です。次のコードを使用して、ビデオをWebサイトに埋め込むことができます。</p> <p>コードは次を返します：</p> </a> </div> <図クラス=使用される "WP-画像ブロック"> <IMG SRC = "https://lh5.googleusercontent.com/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXoc VAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf" ALT = "B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf"> </図> <P> <em> <iframe> </ em>を使用して、外部WebリソースをWebページに埋め込みます。私たちが構築したWebリソースは、リンク "<a href=" https://www.youtube.com/embed/Rk8dCnKIfP4 "target =" _ blank "rel =" noopener "> https://www.youtube.com /埋め込み/Rk8dCnKIfP4</a>"。これは、歴史協会がWebサイトに表示したいビデオを示しています。</p><h4>HTMLiframeの高さと幅</h4><p> heightとwidth属性は、iframeのサイズを定義するために使用されます。地元のワシントンDCの歴史協会が、自分のサイトの動画を拡大することを望んでいるとします。</p> <p> YouTube動画の幅を500ピクセル、高さを300ピクセルに設定します。</p> <p> p> <p>コードは次を返します：</p> <figure class =" wp-image-block "> <img src =" https： / / lh4.googleusercontent.com/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "ALT =" YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ「> </フィギュア> <P>私たちの埋め込まれたビデオは現在、500pxなど広いと私たちのHTMLドキュメントに300ピクセル高です。これにより、人々は</figure><p>ウェブサイトで</p>私たちのウェブサイトを簡単に見ることができます。</p>>または、<ahref="/css-height-and-width/を定義することもできます。 ">CSSを使用したiframeタグの幅と高さ</a>。ただし、HTMLは高さと重みの属性をサポートしているため、これは必要ありません。</p> <h2>HTMLiframeから境界線を削除する</h2><p> <em> <iframe> </ em>を使用する場合は、そのコンテンツが境界線で囲まれていることに注意してください。この境界線を削除する場合は、<a href="/css-borders/"> <em> border：none; </ em> </a> <ahref="/css-borders/">を使用できます。 CSS属性</a>。</p><p>歴史協会から、サイトからYouTube動画の境界線を削除するように求められました。境界線を削除するために使用するコードは次のとおりです。</p> <p>コードは次を返します：</p今、私たち> <クラス面= "WP-画像ブロック"> <IMG SRC = "https://lh5.googleusercontent.com/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF" ALT = "C GqIGiI370xPK2xxk LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF"> </フィギュア> <P>ビデオには境界線がなくなりました。</p><h2>HTMLiframeリンクのターゲット</h2><p>さらに、リンクのターゲットフレームとして<em> <iframe></em>タグを使用できます。 HTMLリンクのtarget属性を使用して、リンクのターゲットフレームとしてiframeを定義できます。ターゲットのHTML属性は、<em> <iframe></em>のname属性を参照する必要があります。</p><p>歴史的社会に、ウェブサイトの第1条に表示してほしい別の動画があるとします。アメリカ合衆国憲法。この動画もKhanAcademyによって投稿されました。</p> </a> </div><p>Webページの<em>Birth</ em>というテキストをクリックすると、ビデオ<em> Birth of the Constitution of the States -ユナイテッド</em>はiframeに表示される必要があります。テキスト<em>ArticleI </ em>をクリックすると、憲法のArticleIのビデオがレンダリングされます。</p> <p>これを行うための次のコード：</p> <p>コードが返す：</p> <figure class = "wp -block-image"> <img src = "https：//lh4.googleusercontent.com/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjj sS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcT xyYH5BxOkW4Iy OALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr "ALT ="> </フィギュアRdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr「> <P>デフォルトでは、米国の憲法の誕生のビデオは、アイフレームに述べています。 iframeの内容は、憲法第1条のカーンアカデミーのビデオを指すように変更されます。これは、<em> Article I </em>URLをクリックしたときに発生します。</p> </div> <p> <em> Birth </ em>をクリックしたときにこのビデオがまだ存在しない場合、iframeは憲法の誕生時にビデオにリダイレクトされます。</p> <h2>結論</h2><p> HTML <em> <iframe> </ em>タグは、Webページなどの外部Webリソースを別のWebページに埋め込みます。これは、マップ、ファイル、ビデオ、またはその他のWebページをサイトに追加する場合に役立ちます。</p> <p>このチュートリアルでは、例を参照して、HTMLの使用方法を説明しました<em> <iframe> </ em >外部のWebリソースをWebページに表示します。これで、プロのように<em> <iframe> </ em>タグの使用を開始するための知識が得られました！</p> <p> HTMLコーディングの詳細については、以下をお読みください。 <a href="/learn-html / "> </a> <ahref="/learn-html/?>学習ガイドハイパーテキストマークアップ言語</a>。</p>