iframeObject.srcdocプロパティ

iframeObject.srcdocは、インラインフレームのsrcdoc属性の値を取得、もしくは、設定するプロパティ。

srcdoc属性には、インラインフレームに表示する内容を指定できる。

src属性とsrcdoc属性を両方指定した場合、srcdoc属性の方が優先される。

構文

取得

var $srcdoc = $iframeElementReference.srcdoc;

戻り値

インラインフレームのsrcdoc属性の値。

設定

$iframeElementReference.srcdoc = "iframeElementSrcdoc";
iframeElementSrcdoc
インラインフレームのsrcdoc属性値を指定。

サンプル

インラインフレームのsrcdoc属性の値:

サンプルの動作について

  • 「A」ボタンをクリックすると、インラインフレームのsrcdoc属性値を<b>インラインフレームのサンプル。</b>にし、インラインフレーム内に「インラインフレームのサンプル。」と表示する。「インラインフレームのsrcdoc属性の値:」の右横の1行テキスト入力欄に<b>インラインフレームのサンプル。</b>と表示する。
  • 「B」ボタンをクリックすると、インラインフレームのsrcdoc属性値を<p>このテキストは、インラインフレーム内のテキスト。</p>にし、インラインフレーム内に「このテキストは、インラインフレーム内のテキスト。」と表示する。「インラインフレームのsrcdoc属性の値:」の右横の1行テキスト入力欄に<p>このテキストは、インラインフレーム内のテキスト。</p>と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setSrcdoc( $srcdoc ) {
    if( $srcdoc == "A" ){
        $srcdoc = "<b>インラインフレームのサンプル。</b>";
    }else{
        $srcdoc = "<p>このテキストは、インラインフレーム内のテキスト。</p>";
    }
    var $elementReference = document.getElementById( "sample" );
    $elementReference.srcdoc = $srcdoc;
    var $srcdoc = $elementReference.srcdoc;
    document.getElementById( "sampleOutput" ).value = $srcdoc;
}
</script>

HTML

<p>
    <button onclick="setSrcdoc('A')"></button>
    <button onclick="setSrcdoc('B')"></button>
</p>
<p>インラインフレームのsrcdoc属性の値:<input type="text" id="sampleOutput" size="40"></p>
<iframe id="sample" srcdoc="インラインフレーム" width="300px" height="100px">
    <p>お使いのブラウザはiframeに対応していません。</p>
</iframe>

スポンサード リンク

カテゴリー: DOM, IFrameオブジェクト, JavaScript, リファレンス パーマリンク