iframeObject.srcプロパティ

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

src属性には、インラインフレームに表示するドキュメントのURLを指定できる。

構文

取得

var $src = $iframeElementReference.src;

戻り値

インラインフレームのsrc属性の値。インラインフレームに表示しているドキュメントのURL。

設定

$iframeElementReference.src = "URL";
URL
インラインフレームに表示するドキュメントのURLを指定。

サンプル

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

サンプルの動作について

  • 「A」ボタンをクリックすると、インラインフレームのsrc属性値を「http://alphasis.info/wp-content/uploads/2014/02/sampleIFrame.html」にし、赤い背景色のHTMLファイルを表示する。「インラインフレームのsrc属性の値:」の右横に「http://alphasis.info/wp-content/uploads/2014/02/sampleIFrame.html」と表示する。
  • 「B」ボタンをクリックすると、インラインフレームのsrc属性値を「http://alphasis.info/wp-content/uploads/2014/02/sampleIFrameB.html」にし、青い背景色のHTMLファイルを表示する。「インラインフレームのsrc属性の値:」の右横に「http://alphasis.info/wp-content/uploads/2014/02/sampleIFrameB.html」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setName( $src ) {
    var $elementReference = document.getElementById( "sample" );
    $elementReference.src = $src;
    var $src = $elementReference.src;
    document.getElementById( "sampleOutput" ).innerHTML = $src;
}
</script>

HTML

<p>
    <button onclick="setName('http://alphasis.info/wp-content/uploads/2014/02/sampleIFrame.html');"></button>
    <button onclick="setName('http://alphasis.info/wp-content/uploads/2014/02/sampleIFrameB.html');"></button>
</p>
<p>インラインフレームのsrc属性の値:<span id="sampleOutput"></span></p>
<iframe id="sample" src="http://alphasis.info/wp-content/uploads/2014/02/sampleIFrame.html" width="300px" height="100px">
    <p>お使いのブラウザはiframeに対応していません。</p>
</iframe>

スポンサード リンク

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