Search

IFrameオブジェックト一覧

unknown

プロパティ説明
alignleft(左寄せ)
right(右寄せ)
top(上寄せ)
middle(中央寄せ)
bottom(下寄せ)
インラインフレームの表示位置を取得・設定(テキストを回り込ませる場合、インラインフレームをどの位置に寄せるか)
frameBorder1(枠線あり)
0(枠線なし)
インラインフレームの枠線を取得・設定
heightピクセル指定
%指定
インラインフレームの高さを取得・設定
marginHeightピクセル指定インラインフレーム内の上下余白を取得・設定
marginWidthtピクセル指定インラインフレーム内の左右余白を取得・設定
name文字列インラインフレームの名前を取得・設定
scrollingyes(スクロール)
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>
    ポイントは以下の3つ!
    <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>

読み込んだページの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" />

余白:


関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women