HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのiframe要素に表示するページのコンテンツをsrcdoc属性で指定する方法

srcdoc属性を使用すると、<iframe>のフレーム内に表示するページのHTMLコンテンツを直接指定できます。この属性の値として記述したHTMLコードが、iframeの中にそのままレンダリングされるため、別ファイルを読み込まずにインラインでコンテンツを埋め込むことが可能です。

srcdoc属性の実装例

以下のコードは、srcdoc属性を使ってiframe内にHTMLコンテンツを表示する基本的な例です。

<!DOCTYPE html>
<html>
<body>
    <iframe srcdoc = "<h2>Tutorialspoint</h2>" src = "new.html">
        <p>お使いのブラウザはiframeに対応していません。</p>
    </iframe>
</body>
</html>

押さえておきたいポイント

  • srcdoc属性の値には、表示したいHTMLコードをそのまま記述します。
  • srcdocとsrcを両方指定した場合、srcdocに対応しているモダンブラウザではsrcdocの内容が優先して表示され、非対応の古いブラウザではsrcで指定した「new.html」がフォールバックとして読み込まれます。
  • iframeタグの開始タグと終了タグの間に記述したテキストは、iframe自体に非対応の環境向けの代替コンテンツとして機能します。

このようにsrcdoc属性を活用すれば、外部ファイルに依存せずiframe内のコンテンツを柔軟に制御できるため、デモや埋め込み用のスニペットなどで非常に便利です。

  1. HTMLページで円を描く方法｜CSSのborder-radiusを使った簡単な実装例

    HTMLページ上に円を描くには、主に「SVG」「Canvas」「CSS」の3つの方法があります。中でも最も手軽なのが、CSSのborder-radiusプロパティを使う方法です。要素の幅と高さを同じ値にし、border-radiusをその半分（または50%）に設定するだけで、簡単に正円を描くことができます。CSSで円を描くサンプルコード以下のコードを実行すると、青い円が画面に表示されます。ぜひ実際に試してみてください。<!DOCTYPE html> <html>    <head>     

  2. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま