iframeObject.contentDocumentは、インラインフレームのドキュメントオブジェクトへの参照を返すプロパティ。
構文
取得
var $contentDocument = $iframeElementReference.contentDocument;
戻り値
インラインフレームのドキュメントオブジェクトへの参照。
サンプル
サンプルの動作について
- 「red」ボタンをクリックすると、インラインフレーム内のドキュメントの背景色を「赤色」にする。
- 「blue」ボタンをクリックすると、インラインフレーム内のドキュメントの背景色を「青色」にする。
- 「green」ボタンをクリックすると、インラインフレーム内のドキュメントの背景色を「緑色」にする。
- 「black」ボタンをクリックすると、インラインフレーム内のドキュメントの背景色を「黒色」にする。
- 「gray」ボタンをクリックすると、インラインフレーム内のドキュメントの背景色を「灰色」にする。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setIFrameBackgroundColor( $color ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.contentDocument.body.style.backgroundColor = $color;
}
</script>
function setIFrameBackgroundColor( $color ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.contentDocument.body.style.backgroundColor = $color;
}
</script>
HTML
<p>
<button onclick="setIFrameBackgroundColor('red');">red</button>
<button onclick="setIFrameBackgroundColor('blue');">blue</button>
<button onclick="setIFrameBackgroundColor('green');">green</button>
<button onclick="setIFrameBackgroundColor('black');">black</button>
<button onclick="setIFrameBackgroundColor('gray');">gray</button>
</p>
<iframe id="sample" src="http://alphasis.info/wp-content/uploads/2014/02/sampleIFrame.html" width="300px" height="100px">
<p>お使いのブラウザはiframeに対応していません。</p>
</iframe>
<button onclick="setIFrameBackgroundColor('red');">red</button>
<button onclick="setIFrameBackgroundColor('blue');">blue</button>
<button onclick="setIFrameBackgroundColor('green');">green</button>
<button onclick="setIFrameBackgroundColor('black');">black</button>
<button onclick="setIFrameBackgroundColor('gray');">gray</button>
</p>
<iframe id="sample" src="http://alphasis.info/wp-content/uploads/2014/02/sampleIFrame.html" width="300px" height="100px">
<p>お使いのブラウザはiframeに対応していません。</p>
</iframe>