iframeObject.srcdocは、インラインフレームのsrcdoc属性の値を取得、もしくは、設定するプロパティ。
srcdoc属性には、インラインフレームに表示する内容を指定できる。
src属性とsrcdoc属性を両方指定した場合、srcdoc属性の方が優先される。
構文
取得
var $srcdoc = $iframeElementReference.srcdoc;
戻り値
インラインフレームのsrcdoc属性の値。
設定
$iframeElementReference.srcdoc = "iframeElementSrcdoc";
- iframeElementSrcdoc
- インラインフレームのsrcdoc属性値を指定。
サンプル
インラインフレームのsrcdoc属性の値：
サンプルの動作について
- 「Ａ」ボタンをクリックすると、インラインフレームのsrcdoc属性値を
<b>インラインフレームのサンプル。</b>にし、インラインフレーム内に「インラインフレームのサンプル。」と表示する。「インラインフレームのsrcdoc属性の値：」の右横の１行テキスト入力欄に<b>インラインフレームのサンプル。</b>と表示する。 - 「Ｂ」ボタンをクリックすると、インラインフレームのsrcdoc属性値を
<p>このテキストは、インラインフレーム内のテキスト。</p>にし、インラインフレーム内に「このテキストは、インラインフレーム内のテキスト。」と表示する。「インラインフレームのsrcdoc属性の値：」の右横の１行テキスト入力欄に<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>
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>
<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>