インラインフレーム｜frame（フレーム）オブジェクト｜JavaScript/DOM

TOP JavaScript/DOMインラインフレーム

IFrameオブジェックト一覧
インラインフレームの周囲にテキストを回り込ませる
インラインフレームの表示位置を取得・設定〔alignプロパティ〕
インラインフレームの枠線の表示・非表示を取得・設定〔frameBorderプロパティ〕
インラインフレームのname属性を取得･設定〔nameプロパティ〕
インラインフレームのスクロールバーを取得・設定〔scrollingプロパティ　※Firefoxのみ〕
インラインフレーム内に読み込むページのURLを取得・設定〔srcプロパティ〕
インラインフレームの幅・高さを取得・設定〔width/heightプロパティ〕
インラインフレームの余白を取得・設定〔marginWeight/marginHeightプロパティ〕

IFrameオブジェックト一覧

unknown

プロパティ	値	説明
align	left（左寄せ） right（右寄せ） top（上寄せ） middle（中央寄せ） bottom（下寄せ）	インラインフレームの表示位置を取得・設定（テキストを回り込ませる場合、インラインフレームをどの位置に寄せるか）
frameBorder	1（枠線あり） 0（枠線なし）	インラインフレームの枠線を取得・設定
height	ピクセル指定 %指定	インラインフレームの高さを取得・設定
marginHeight	ピクセル指定	インラインフレーム内の上下余白を取得・設定
marginWidtht	ピクセル指定	インラインフレーム内の左右余白を取得・設定
name	文字列	インラインフレームの名前を取得・設定
scrolling	yes（スクロール） no（スクロール不可） auto（自動）	インラインフレームから内容がはみ出る場合にスクロールバーを表示するか否かの取得・設定
src	パス	インラインフレーム内に表示するページのURLを取得・設定
width	ピクセル指定 %指定	インラインフレームの幅を取得・設定

インラインフレームの周囲にテキストを回り込ませる

unknown

＜iframe align='xxx'＞

インラインフレームの周囲にテキストを回り込ませるには、iframe要素にalign属性を指定します。コンテンツ内にインラインフレームをさりげなく埋め込むには、以下の指定も追加します。

フレームの枠線を消す　→　frameborder=0
インラインフレーム内の余白をゼロにする　→　marginwidth=0 marginheight=0
インラインフレームの縦横サイズ　→　広告バナーと同じサイズに指定
スクロールなし　→　scrolling="no"

このインラインフレームの使い方は、アフェリエイト広告でよく使われている方法です。

サンプルを見る

<iframe name="ifrm6" src="/module/include/js/iframe/sample.html" 
        width="100" height="100" 
        scrolling="no" frameborder="0"
        align="left"
        marginwidth="10"
        marginheight="10"
        style='margin-right:1em;'>
インラインフレーム対応のブラウザでご覧下さい。
</iframe>
<p>
    インラインフレームの周囲にテキストを回り込ませる事が出来ます。
    一見、img要素で画像を表示しているように見えますが、左のペンギンは別ページに貼ってある画像です。
</p>
<p>
    この使い方はバリューコマースなどアフェリエイト広告を表示するのに使用されています。<br>
    ポイントは以下の３つ！
    <br clear="all" />
</p>
<ol>
    <li>インラインフレーム内の余白をゼロにする。</li>
    <li>インラインフレームの縦横サイズを、広告バナーサイズにする。</li>
    <li>スクロール無しを指定。</li>
</ol>
<p>
    ※marginwidth=0 marginheight=0 にすると、インラインフレーム内の余白がゼロになります。<br>
    ※frameborder=1 にすると、インラインフレームの周囲に枠線が表示されます。<br>
    ※scrolling="no" にすると、スクロールバーが非表示になります。
</p>

インラインフレームの表示位置を取得・設定
alignプロパティ

unknown

インラインフレームオブジェクト.align = top | middle | bottom | left | right

alignプロパティはインラインフレームの水平表示位置を取得・設定します。 left（左寄せ）、right（右寄せ）、center（中央寄せ）、top（上寄せ）、bottom（下寄せ）を指定できます。

サンプルを見る

<script type="text/javascript">
    function fSetFrameAlign(frameID,position){
        var obj=document.getElementById(frameID);
        obj.align=position;
        fGetFrameAlign(frameID);
    }
    function fGetFrameAlign(frameID){
        var obj=document.getElementById(frameID);
        var s="";
        s+="frameID: "+frameID+"<br \/>";
        s+="align: "+obj.align+"<br \/>";
        document.getElementById("resGetFrameAlign").innerHTML=s;
    }
</script>

<div style="padding:10px; background-color:#ffffcc; overflow:hidden; text-align:center;">
    <iframe 
        id="iframeA" 
        src="/content/demo/sample.html" 
        width="220" height="120" 
        scrolling="yes" 
        frameborder="1"
    >
    インラインフレーム対応のブラウザでご覧下さい。
    </iframe>
</div>
<br clear="all" />
<p>
    水平表示位置: 
    <input type="button" onclick="fSetFrameAlign('iframeA','left')" value="left" />
    <input type="button" onclick="fSetFrameAlign('iframeA','center')" value="center" />
    <input type="button" onclick="fSetFrameAlign('iframeA','right')" value="right" />
</p>

水平表示位置:

インラインフレームの枠線の表示・非表示を取得・設定
frameBorderプロパティ

unknown

インラインフレームオブジェクト.frameBorder = 1（表示） | 0（非表示）

frameBorderプロパティは、インラインフレームの枠線の表示・非表示を設定・取得します。 0を指定すると枠線が非表示になり、1を指定すると枠線が表示されます。

サンプルを見る

<script type="text/javascript">
    function fSetFrameBorder(frameID,flag){
        var obj=document.getElementById(frameID);
        obj.frameBorder=flag;
        var s="frameID: "+frameID+"<br \/>frameBorder: "+obj.frameBorder+"<br \/>\n";
        document.getElementById("resGetFrameBorder").innerHTML=s;
    }
    function fGetFrameBorder(frameID){
        var obj=document.getElementById(frameID);
        var fb=obj.frameBorder;
        var s="frameID: "+frameID+"<br \/>frameBorder: "+fb+"<br \/>\n";
        document.getElementById("resGetFrameBorder").innerHTML=s;
    }
</script>

<iframe id="iframe1" 
    src="/content/demo/sample.html" 
    width="200" height="100" 
    scrolling="no" 
    frameborder="1" 
    align="left"
    marginwidth="10"
    marginheight="10"
    style="margin-right:5px;"
>
インラインフレーム対応のブラウザでご覧下さい。
</iframe>
<p>
    枠線：
    <input type="button" onclick="fSetFrameBorder('iframe1',0)" value="表示" />
    <input type="button" onclick="fSetFrameBorder('iframe1',1)" value="非表示" />
</p>
<p id="resGetFrameBorder"></p>
<br clear="all" />

枠線：

インラインフレームのname属性を取得･設定
nameプロパティ

unknown

インラインフレームオブジェクト.name = 名前;

nameプロパティは、インラインフレームの名前（name属性）を取得・設定します。

サンプルを見る

<script type="text/javascript">
    function fSetFrameName(frameID,iframeName){
        var obj=document.getElementById(frameID);
        obj.name=iframeName;
    }
    function fGetFrameName(frameID){
        var obj=document.getElementById(frameID);
        document.getElementById("resGetFrameName").innerHTML="frameID: "+frameID+"<br \/>name: "+obj.name;
    }
</script>

<iframe id="iframe5" name="iframe5" 
    src="/content/demo/sample.html" 
    width="200" height="100" 
    scrolling="no" 
    frameborder="1" 
    align="left" 
    style="margin-right:10px;"
>
インラインフレーム対応のブラウザでご覧下さい。
</iframe>
<p>
    <input type="button" onclick="fGetFrameName('iframe5')" value="名前を取得" />
    <input type="button" onclick="fSetFrameName('iframe5','hoge')" value="名前を'hoge'に設定" />
</p>
<p id="resGetFrameName"></p>
<br clear="all" />

インラインフレームのスクロールバーを取得・設定
scrollingプロパティ　※Firefoxのみ

unknown

インラインフレームオブジェクト.scrolling = yes | no | auto

scrollingプロパティは、インラインフレームのスクロールバーの有効・無効を取得・設定します。

yesを指定した場合、インラインフレームのスクロールバーの設定が有効になります。 noを指定した場合、インラインフレームのスクロールバーの設定が無効になります。

サンプルを見る

<script type="text/javascript">
    /* スクロールバーを設定 */
    function fSetFrameScroll(frameID,flag){
        var obj=document.getElementById(frameID);
        obj.scrolling=flag;
        var s="frameID: "+frameID+"<br \/>scrolling: "+obj.scrolling+"<br \/>\n";
        document.getElementById("resGetFrameScroll").innerHTML=s;
    }
    /* スクロールバーを取得 */
    function fGetFrameScroll(frameID){
        var obj=document.getElementById(frameID);
        var s="frameID: "+frameID+"<br \/>scrolling: "+obj.scrolling+"<br \/>\n";
        document.getElementById("resGetFrameScroll").innerHTML=s;
    }
</script>

<p>※IFrameオブジェクトのscrollingプロパティは「Firefox」のみ対応</p>
<iframe id="iframe3" 
    src="/content/demo/sample.html" 
    width="200" height="100" 
    scrolling="yes" 
    frameborder="1" 
    align="left" 
    style="margin:0 10px 10px 0;"
>
インラインフレーム対応のブラウザでご覧下さい。
</iframe>
<p>
    スクロールバー: 
    <input type="button" onclick="fSetFrameScroll('iframe3','yes')" value="有効" />
    <input type="button" onclick="fSetFrameScroll('iframe3','no')" value="無効" />
</p>
<p id="resGetFrameScroll"></p>
<br clear="all" />

※IFrameオブジェクトのscrollingプロパティは「Firefox」のみ対応

スクロールバー:

インラインフレーム内に読み込むページのURLを取得・設定
srcプロパティ

unknown

インラインフレームオブジェクト.src = URL;　

srcプロパティはインラインフレームのsrc属性に指定したURLを取得・設定します。 Firefoxでは、src属性に相対パスを指定している場合も取得される値は絶対パス（URL）になります。

インラインフレーム内に表示するページを変更（src属性）

サンプルを見る

<script type="text/javascript">
    function fIFrameSrc(url){
        var obj=document.getElementById("iframe7");
        obj.src=url;
        document.getElementById("resIFrameSrc").value=obj.src;
    }
</script>

<p>
    <label for="s0"><input type="radio" id="s0" name="ss" value="/content/demo/sample.html" onclick="fIFrameSrc(this.value)" />ダミーページ</label>
    <label for="s1"><input type="radio" id="s1" name="ss" value="http://www.yahoo.co.jp" onclick="fIFrameSrc(this.value)" />Yahoo! JAPAN</label>
    <label for="s2"><input type="radio" id="s2" name="ss" value="http://www.google.co.jp" onclick="fIFrameSrc(this.value)" />Google</label>
</p>

<iframe 
    id="iframe7" 
    src="/content/demo/sample.html" 
    width="490" height="200" 
    scrolling="yes" 
    frameborder="1"
>
インラインフレーム対応のブラウザでご覧下さい。
</iframe>
<p>読み込んだページのURL：<input type="text" id="resIFrameSrc" size="45" readonly="readonly" /></p>

ダミーページ Yahoo! JAPAN Google

読み込んだページのURL：

インラインフレーム内に表示するページを変更（location.href使用）

また、location.hrefを使っても、インラインフレーム内に表示するページを変更できます。

window.インラインフレーム名.location.href = URL;

サンプルを見る

<form action="#">
    <!-- プルダウンメニューで選んだページをインラインフレーム内で切替表示 -->
    <p>検索サイト：
    <select name="sel" onChange="iframeChange(this.options[this.selectedIndex].value);">
        <option value="http://www.google.co.jp/">Google</option>
        <option value="http://www.yahoo.co.jp">Yahoo! JAPAN</option>
        <option value="http://www.goo.ne.jp/">goo</option>
    </select>
    <iframe name="iframeA" src="/content/demo/sample.html" 
            width="500" height="200" 
            scrolling="no" frameborder="0"
            marginWidth="0" marginHeight="0"
            style="border:1px solid #666;"
    >
    インラインフレーム対応のブラウザでご覧下さい。
    </iframe>
</form>
<script type="text/javascript">
    function iframeChange(url){
        window.iframeA.location.href=url;
    }
</script>

インラインフレームの幅・高さを取得・設定
width/heightプロパティ

unknown

インラインフレームオブジェクト.width = 幅（px）
インラインフレームオブジェクト.height = 高さ（px）

heightプロパティはインラインフレームの高さを取得・設定します。 widthプロパティはインラインフレームの幅を取得・設定します。戻り値および設定値はピクセル単位です。

サンプルを見る

<script type="text/javascript">
    function fSetFrameSize(frameID,w,h){
        var obj=document.getElementById(frameID);
        obj.width=w;
        obj.height=h;
        fGetFrameSize(frameID);
    }
    function fGetFrameSize(frameID){
        var obj=document.getElementById(frameID);
        var s="frameID: "+frameID+"<br \/>width: "+obj.width+"px<br \/>height: "+obj.height+"px\n";
        document.getElementById("resGetFrameSize").innerHTML=s;
    }
</script>

<iframe id="iframe4" 
    src="/content/demo/sample.html" 
    width="200" height="100" 
    scrolling="no" 
    frameborder="1" 
    align="left" 
    style="margin-right:10px;"
>
インラインフレーム対応のブラウザでご覧下さい。
</iframe>
<p>
    サイズ: 
    <input type="button" onclick="fSetFrameSize('iframe4',150,150)" value="150px*150px" />
    <input type="button" onclick="fSetFrameSize('iframe4',200,100)" value="200px*100px" />
</p>
<p id="resGetFrameSize"></p>
<br clear="all" />

サイズ:

インラインフレームの余白を取得・設定
marginWeight/marginHeightプロパティ

unknown

インラインフレームオブジェクト.marginHeigh = 数値（px）
インラインフレームオブジェクト.marginWidth = 数値（px）

marginHeightプロパティはインラインフレーム内の上下余白を取得・設定します。 marginWidthプロパティはインラインフレーム内の左右余白を取得・設定します。戻り値および設定値はピクセル単位です。

DOMアクセスでmarginwidth／marginheightプロパティの値を設定しても反映されません。 IE、Firefoxでダメなので多分ほとんどのブラウザできかないと思います。設定した値を取得するのは問題ないようです。
インラインフレーム内の余白を指定する場合、インラインフレームのmarginwidth／marginheight属性を使用するか、スタイルシートでインラインフレーム内に表示するページのBODY要素にmargin指定しましょう。

サンプルを見る

<script type="text/javascript">
    function fSetIFrameMargin(frameID,marginW,marginH){
      var obj=document.getElementById(frameID);
      obj.marginWidth=marginW;
      obj.marginHeight=marginH;
      fGetIFrameMargin(frameID);
    }
    function fGetIFrameMargin(frameID){
      var obj=document.getElementById(frameID);
      var s="frameID: "+frameID+"<br \/>marginHeight: "+obj.marginHeight+"<br \/>marginWidth: "+obj.marginWidth+"<br \/>\n";
      document.getElementById("resGetIFrameMargin").innerHTML=s;
    }
</script>

<iframe id="iframe2" 
    src="/content/demo/sample.html" 
    width="200" height="100" 
    scrolling="no" 
    frameborder="1" 
    align="left" 
    style="margin-right:10px;"
>
インラインフレーム対応のブラウザでご覧下さい。
</iframe>
<p>
    余白: 
    <input type="button" onclick="fSetIFrameMargin('iframe2',10,10)" value="10px*10px" />
    <input type="button" onclick="fSetIFrameMargin('iframe2',30,30)" value="30px*30px" />
    <input type="button" onclick="fSetIFrameMargin('iframe2',0,0)" value="なし" />
</p>
<p id="resGetIFrameMargin"></p>
<br clear="all" />

余白:

frameオブジェクト フレーム／フレームセット

タイマー タイマーの設定と解除

独自ドメインがずっと無料！国内シェアNo.1【ロリポップ！】

frame（フレーム）オブジェクトインラインフレーム

IFrameオブジェックト一覧

インラインフレームの周囲にテキストを回り込ませる

インラインフレームの表示位置を取得・設定
alignプロパティ

インラインフレームの枠線の表示・非表示を取得・設定
frameBorderプロパティ

インラインフレームのname属性を取得･設定
nameプロパティ

インラインフレームのスクロールバーを取得・設定
scrollingプロパティ　※Firefoxのみ

インラインフレーム内に読み込むページのURLを取得・設定
srcプロパティ

インラインフレーム内に表示するページを変更（src属性）

インラインフレーム内に表示するページを変更（location.href使用）

インラインフレームの幅・高さを取得・設定
width/heightプロパティ

インラインフレームの余白を取得・設定
marginWeight/marginHeightプロパティ

関連コンテンツ

frame（フレーム）オブジェクトインラインフレーム

IFrameオブジェックト一覧

インラインフレームの周囲にテキストを回り込ませる

インラインフレームの表示位置を取得・設定alignプロパティ

インラインフレームの枠線の表示・非表示を取得・設定frameBorderプロパティ

インラインフレームのname属性を取得･設定nameプロパティ

インラインフレームのスクロールバーを取得・設定scrollingプロパティ ※Firefoxのみ

インラインフレーム内に読み込むページのURLを取得・設定srcプロパティ

インラインフレーム内に表示するページを変更（src属性）

インラインフレーム内に表示するページを変更（location.href使用）

インラインフレームの幅・高さを取得・設定width/heightプロパティ

インラインフレームの余白を取得・設定marginWeight/marginHeightプロパティ

関連コンテンツ

インラインフレームの表示位置を取得・設定
alignプロパティ

インラインフレームの枠線の表示・非表示を取得・設定
frameBorderプロパティ

インラインフレームのname属性を取得･設定
nameプロパティ

インラインフレームのスクロールバーを取得・設定
scrollingプロパティ　※Firefoxのみ

インラインフレーム内に読み込むページのURLを取得・設定
srcプロパティ

インラインフレームの幅・高さを取得・設定
width/heightプロパティ

インラインフレームの余白を取得・設定
marginWeight/marginHeightプロパティ