HTML Iframe:ステップバイステップガイド
HTML iframeタグは、WebドキュメントをWebページに埋め込みます。埋め込まれたドキュメントは、PDF、Webページ、または別のアセットである可能性があります。 src属性は、埋め込まれたリソースの場所を定義します。
HTMLを使用して、PDFやGoogleマップの地図など、あるWebドキュメントのコンテンツを別のページに埋め込むことができます。
ここで、HTML HTML タグは、他のWebページなどの外部オブジェクトを単一のWebページに埋め込むために使用されます。このチュートリアルでは、HTMLの使用方法を例を挙げて説明します タグを付けて、WebリソースをWebページに埋め込みます。
HTML iframe
HTML iframe、またはインラインフレームは、ページに外部Webドキュメントを表示します。
インラインフレーム内に格納されているコードは、Webページの他の部分から独立しています。 Webページに適用されるスタイルまたはJavaScriptは、iframe内には適用されません。
HTMLの構文は次のとおりです タグ:
<iframe src="url"></iframe>
タグはiframeを作成するために使用されます。 iframe srcを指定しました 属性。この属性には、Webページに埋め込むHTML要素の場所が含まれています。これはHTMLURLである必要があります。
iframeHTMLコードの例
例を見て、 タグは機能します。
参加者の81%は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
地元のワシントンD.C.歴史協会のウェブサイトを構築しているとします。彼らは、米国憲法の誕生に関するカーンアカデミーからのビデオが埋め込まれたページを作成することを望んでいます。このページは、社会への参加に興味のある方におすすめの資料です。次のコードを使用して、ビデオをWebサイトに埋め込むことができます。
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
コードは次のようになります:
を使用しました 外部WebリソースをWebページに埋め込むための要素。私たちが埋め込んだWebリソースは、リンク「https://www.youtube.com/embed/Rk8dCnKIfP4」です。これは、歴史社会が彼らのウェブサイトに表示したいビデオを示しています。
HTMLIframeの高さと幅
height属性とwidth属性は、iframeのサイズを設定するために使用されます。地元のワシントンD.C.の歴史協会が、自分たちのサイトで動画を大きくすることを望んでいるとします。
YouTubeビデオの幅を500ピクセル、高さを300ピクセルに設定します。
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
コードは次のようになります:
埋め込まれたビデオは、HTMLドキュメントで幅500ピクセル、高さ300ピクセルになりました。これにより、人々はWebサイトで私たちのビデオを簡単に見ることができます。
または、CSSを使用してiframeタグの幅と高さを設定することもできます。ただし、HTMLはheightとweight属性をサポートしているため、これは必要ありません。
HTMLiframeの境界線を削除する
を使用している場合 タグを付けると、その内容が境界線で囲まれていることがわかります。この境界線を削除する場合は、 border:none;を使用できます。 CSS属性。
歴史協会から、YouTube動画の境界線をサイトから削除するように依頼されました。境界線を削除するために使用するコードは次のとおりです。
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
私たちのコードは次を返します:
動画に境界線がなくなりました。
HTMLiframeリンクターゲット
さらに、 タグは、リンクのターゲットフレームとして使用できます。 HTMLリンクのtarget属性を使用して、リンクのターゲットフレームとしてiframeを設定できます。ターゲットHTML属性は、 のname属性を参照する必要があります 。
歴史社会が、米国憲法第1条のウェブサイトに表示してほしい別のビデオを持っていたとします。この動画はカーンアカデミーからも公開されました。
テキストが誕生のとき ウェブページをクリックすると、米国憲法の誕生 ビデオはiframeでレンダリングする必要があります。テキストArticleI クリックすると、憲法第1条のビデオが表示されます。
このタスクを実行するには、次のコードを使用できます。
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Birth</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>
コードは次のようになります:
デフォルトでは、米国憲法の誕生に関するビデオがiframeに表示されます。 iframeの内容は、憲法第1条に関するカーンアカデミーのビデオを指すように変更されています。これは、 Article Iをクリックしたときに発生します。 URL。
Birth をクリックしたときにその動画がまだ紹介されていない場合、iframeは憲法の誕生時に動画にリダイレクトされます 。
結論
HTMLタグは、Webページなどの外部Webリソースを別のWebページに埋め込みます。これは、マップ、ファイル、ビデオ、またはその他のWebページをサイトに追加する場合に役立ちます。
このチュートリアルでは、例を参照して、HTMLの使用方法について説明しました タグを使用して、Webページに外部Webリソースをレンダリングします。これで、 の使用を開始するために必要な知識が得られました。 プロのようにタグ付けしてください!
HTMLでのコーディングの詳細については、ハイパーテキストマークアップ言語の学習ガイドをご覧ください。
-
HTMLウィンドウの長さプロパティ
HTMLウィンドウの長さプロパティは、現在のHTMLドキュメント内の要素の数を返します。 構文 以下は構文です- window.length HTMLウィンドウの長さプロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { color: #000; height: 100vh; background-color: #8BC6EC; &n
-
htmlのSeleniumとiframe。
SeleniumWebdriverでiframeを操作できます。フレームは、HTMLコードの、、またはタグで定義されます。フレームは、HTMLドキュメントを別のHTMLドキュメント内に埋め込むために使用されます。 Seleniumは、デフォルトで親ブラウザードライバーにアクセスできます。フレーム要素にアクセスするには、ドライバーのフォーカスをメインのブラウザーウィンドウからフレームに移動する必要があります。フレームにシフトする方法は複数あります- switchTo()。frame(id)-フレームのIDまたは名前が引数として渡されます。 構文-driver.switchTo()