frame(フレーム)オブジェクトインラインフレーム
- 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属性を指定します。
コンテンツ内にインラインフレームをさりげなく埋め込むには、以下の指定も追加します。
- フレームの枠線を消す →
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プロパティはインラインフレームの水平表示位置を取得・設定します。 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プロパティは、インラインフレームの枠線の表示・非表示を設定・取得します。 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属性)を取得・設定します。
サンプルを見る<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を指定した場合、インラインフレームのスクロールバーの設定が無効になります。
サンプルを見る<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プロパティはインラインフレームの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を使っても、インラインフレーム内に表示するページを変更できます。
<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
インラインフレームオブジェクト.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
インラインフレームオブジェクト.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" />
余白: