Search

フレームの書き方

unknown

親フレーム(frameset要素)内に子フレーム(frame要素)を記述します。
フレーム未対応のブラウザの代替テキストをnoframes要素に記述します。

フレームのデザインによって子フレームの数や親フレームの属性指定(rowscols)が異なります。 2分割、3分割など、フレームの分割数は自由自在で、複雑なフレーム構造にすることも可能です。

複数分割するには、分割数に応じてrows(縦方向分割の割合)、cols(横方向分割の割合)のパーセント指定を カンマ区切りで追加します。

通常のWebページと違い、フレームを使う場合はbody要素を記述しません。
ただし、noframes要素の代替テキストはbody要素内に記述する必要があります。

フレームの書き方は間違って覚えている事が多いです。
間違っても表示されますが、正しいフレームの書き方を覚えておきましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <title>フレームの書き方</title>
    </head>
    <frameset cols='50%,50%'>
        <frame src="left.html" />
        <frame src="right.html" />
        <!-- フレーム未対応のユーザーには、代替テキストが表示される -->
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>

フレームの分割方法

unknown

左右分割

cols (横方向分割の割合)をパーセント(%)指定します。
'30%,*'の「*」は残りを表します。 '30%,70%'と指定したのと同じ意味合いです。

<frameset cols='30%,*'>
    <frame src='left.html'>
    <frame src='right.html'>
</frameset>
左右分割左右分割
左右分割 サンプルを見る ダウンロード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <title>フレーム(左右分割)</title>
    </head>
    <frameset cols="30%,*">
        <frame src="left.html" /><!-- フレーム左側に表示するファイルを指定 -->
        <frame src="right.html" /><!-- フレーム右側に表示するファイルを指定 -->
        <noframes>
            <body>
            <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>

上下分割

rows (縦方向分割の割合)をパーセント(%)指定します。
'30%,*'の「*」は残りを表します。 '30%,70%'と指定したのと同じ意味合いです。

<frameset rows='30%,*'>
    <frame src="left.html">
    <frame src="right.html">
</frameset>
上下分割上下分割
上下分割 サンプルを見る ダウンロード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <title>フレーム(上下分割)</title>
    </head>
    <frameset rows="30%,*">
        <frame src="./up.html" /><!-- フレーム左側に表示するファイルを指定 -->
        <frame src="./down.html" /><!-- フレーム右側に表示するファイルを指定 -->
        <noframes>
            <body>
            <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>

フレームを指定して印刷

unknown

parent.フレーム名.print();

フレームに名前を付けるには、子フレーム(frame要素)のname属性を指定します。 以下の例では、左フレームに「L」、右フレームに「R」という名前を付けています。 フレームを印刷するには、印刷したいフレームにフォーカスを当ててから、印刷処理を実行します。

<frameset cols='30%,*'>
	<frame src='left.html' name='L'>
	<frame src='right.html' name='R'>
</frameset>

サンプルを見る ダウンロード

トップフレーム(top.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <title>フレーム(左右分割)</title>
    </head>
    <frameset cols="30%,*">
        <frame src="./left.html" id="L" name="L" /><!-- フレーム左側に表示するファイルを指定 -->
        <frame src="./right.html" id="R" name="R" /><!-- フレーム右側に表示するファイルを指定 -->
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>
左フレーム(left.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <title>left.html</title>
        <script type="text/javascript">
            function framePrint() {
                /* 右フレーム(R)にフォーカスを当てる */
                parent.R.focus();
                /* 右フレームを印刷 */
                parent.R.print();
            }
        </script>
        <style type="text/css">
            body { background-color:#ffffcc; }
        </style>
    </head>
    <body>
        <h1>左フレーム</h1>
        <p>リンクをクリックすると、印刷ウィザードが表示されます。</p>
        <p><a href="javascript:framePrint()">左フレームを印刷</a></p>
    </body>
</html>
右フレーム(rigt.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <title>right.html</title>
        <script type="text/javascript">
            function framePrint() {
                /* 左フレーム(L)にフォーカスを当てる */
                parent.L.focus();
                /* 左フレームを印刷 */
                parent.L.print();
            }
        </script>
        <style type="text/css">
            body { background-color:#eee; }
        </style>
    </head>
    <body>
        <h1>右フレーム</h1>
        <p>リンクをクリックすると、印刷ウィザードが表示されます。</p>
        <p><a href="javascript:framePrint()">右フレームを印刷</a></p>
    </body>
</html>

複数のフレームを同時に変更
フレーム数取得、フレーム名取得、フレームのURL取得

unknown

parent.フレーム名.location = URL
parent.frames[フレーム名].location = URL

parent.frames.length

parent.フレーム名.name
parent.frames[フレーム名].name

親フレームの場合はparentプロパティ、フレームトップの場合はtopプロパティ、現在のフレームの場合はselfプロパティを使用します。

複数のフレームを同時に変更

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>複数のフレームを同時に変更</title>
    </head>
    <frameset cols='30%,70%' frameborder="1">
        <frame name='left' src='/module/include/js/frame/frameChange/left.html' />
        <frameset rows='40%,60%'>
            <frame name='up' src='/module/include/js/frame/frameChange/up.html' />
            <frame name='down' src='/module/include/js/frame/frameChange/down.html' />
        </frameset>
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>
左フレーム(left.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>left.html</title>
        <script type="text/javascript">
            /* 複数のフレームを同時に変更 */
            function chgFrame(){
                /* 上フレームに表示するURLを指定 */
                parent.up.location="http://www.yahoo.co.jp";
                /* 下フレームに表示するURLを指定 */
                parent.down.location="http://www.google.co.jp";
            }
            /* フレームのURLを取得 */
            function getLocation(frameName){
                alert(parent.frames[frameName].location);
            }
            /* 親フレームのフレーム数を取得 */
            function getFrameLength(){
                alert("フレーム数 = "+parent.frames.length);
            }
            /* フレーム名を取得 */
            function getFrameName(){
                alert("現在のフレーム名 = "+self.frames.name+"\n\n親フレーム名 = "+parent.frames.name);
            }
        </script>
    </head>
    <body>
        <h1>left.html</h1>
        <p>
            <input type='button' value='右フレームの上下フレームを同時に変更' onClick='chgFrame()' />
        </p>
        <p>
            <input type='button' value='このフレームのURLを取得' onClick='getLocation("left")' /><br>
            <input type='button' value='親フレームのURLを取得' onClick='getLocation("top")' />
        </p>
        <p>
            <input type='button' value='親フレームのフレーム数を取得' onClick='getFrameLength()' />
            <input type='button' value='このフレームの名前を取得' onClick='getFrameName("left")' />
        </p>
    </body>
</html>

他のフレームを操作

unknown

praent.フレーム名.document.フォーム名.エレメント名.value = 値
parent.フレーム名.document.bgColor = 色
parent.フレーム名.location = URL

[parent | top | self].[フレーム名].[プロパティ | メソッド]と記述すると、現在のフレーム以外のフレームのプロパティを変更したり、表示するURLを変更できます。

他のフレームを操作

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>他のフレームを操作</title>
    </head>
    <frameset cols="40%,60%">
        <frame name="left" src="/module/include/js/frame/frameOther/left.html" />
        <frame name="right" src="/module/include/js/frame/frameOther/right.html" />
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>
左フレーム(left.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>left.html</title>
        <script type="text/javascript">
            /* 指定したフレームの背景色を変更 */
            function chgBgColor(frameName){
                var color=new Array("#ffffcc","#ffffff");
                if(parent.frames[frameName].document.bgColor==color[0]){
                    parent.frames[frameName].document.bgColor=color[1];
                }else{
                    parent.frames[frameName].document.bgColor=color[0];
                }
            }
            /* 選択したページを右フレームに表示 */
            function chgFrameURL(){
                url=document.form1.sel.options[document.form1.sel.selectedIndex].value;
                parent.right.location=url;
            }
            /* 指定した文字列を右フレームのテキストに表示 */
            function chgText(){
                str=document.form1.txt.value;
                parent.right.document.form2.txt.value=str;
            }
        </script>
    </head>
    <body style="background-color:#eee;">
        <h1>left.html</h1>
        <form action="#" name="form1">
            <p>
                <input type="button" value="右フレームの背景色変更" onClick="chgBgColor('right')" />
            </p>
            <p>
                <input type="text" value="あいうえお" name="txt" />
                <input type="button" value="右フレームのテキストボックスの内容を変更" onClick="chgText()" />
            </p>
            <select name="sel">
                <option value="http://www.yahoo.co.jp">Yahoo! Japan</option>
                <option value="http://www.google.co.jp">Google</option>
            </select>
            <input type="button" value="右フレームに表示" onClick="chgFrameURL()" />
        </form>
    </body>
</html>

ウィンドウ内のフレーム数を取得
window.length

unknown

window.length

lengthプロパティは、現在のウィンドウ内にあるフレーム数を返します。 フレームを使用していないページの場合は、0が返ります。

<script type="text/javascript">
    document.write("現在のページ内にあるフレーム数: <em>"+window.length+"<\/em>");
</script>

Frameset/frameオブジェックト一覧

unknown

Framesetオブジェクト
プロパティ説明
colsフレームの列数を取得(横方向の分割数)
rowsフレームの行数を取得(縦方向の分割数)
Frameオブジェクト
プロパティ説明
contentDocumentHTMLオブジェクトとしてフレームを返す
frameBorderフレームの枠線の表示・非表示を取得・設定
longDescフレーム文書が定義されている文書のURLを取得・設定
noResizeリサイズを許可するかの取得・設定
scrollingフレームのスクロールバーを取得・設定
srcフレーム内に読み込むページのURLを取得・設定

フレームセットの分割方法を取得・設定
cols/rowsメソッド

unknown

フレームセットオブジェクト.cols = 列数
フレームセットオブジェクト.rows = 行数

colsプロパティは、親フレーム(frameset要素)のcols属性の値をを取得・設定します。 rowsプロパティは、親フレーム(frameset要素)のrows属性の値をを取得・設定します。

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

フレームセットのcols属性・rows属性の値を取得・設定

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Framesetオブジェクト : cols</title>
    </head>
    <frameset id="pFrame" cols="50%,50%">
        <frame src="/module/include/js/frame/frameset_cols/left.html" id="leftFrame" />
        <frame src="/module/include/js/frame/frameset_cols/right.html" id="rightFrame" />
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧ください。</p>
            </body>
        </noframes>
    </frameset>
</html>
右フレーム(right.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>right</title>
    </head>
    <body style="background-color:#ffffcc;">
        <h1>right</h1>
        <h2>設定</h2>
        <form action="#">
            <p>
                フレームの横方向の分割サイズを変更:
                <input type="button" value="30%,70%" onclick="fChgFrameCols('30%,70%')" />
                <input type="button" value="50%,50%" onclick="fChgFrameCols('50%,50%')" />
            </p>
            <p>
                フレームの縦方向の分割サイズを変更:
                <input type="button" value="30%,70%" onclick="fChgFrameRows('30%,70%')" />
                <input type="button" value="50%,50%" onclick="fChgFrameRows('50%,50%')" />
            </p>
        </form>
        <script type="text/javascript">
            /* フレームセットのcols属性変更 */
            function fChgFrameCols(presize){
                parent.document.getElementById("pFrame").rows="";
                parent.document.getElementById("pFrame").cols=presize;
                fGetFrameCR();
            }
            /* フレームセットのrows属性変更 */
            function fChgFrameRows(presize){
                parent.document.getElementById("pFrame").cols="";
                parent.document.getElementById("pFrame").rows=presize;
                fGetFrameCR();
            }
        </script>
        <h2>取得</h2>
        <p id="resGetFrameCR"></p>
        <script type="text/javascript">
            function fGetFrameCR(){
                /* フレームセットオブジェクト */
                var parentObj=parent.document.getElementById("pFrame");
                var s="";
                /* フレームセットのcols属性(列)を取得 */
                s+="cols: "+((parentObj.cols) ? parentObj.cols : "")+"<br \/>";
                /* フレームセットのrows属性(行)を取得 */
                s+="rows: "+((parentObj.rows) ? parentObj.rows : "")+"<br \/>";
                document.getElementById("resGetFrameCR").innerHTML=s;
            }
        </script>
    </body>
</html>

親フレーム(frameset)の分割方法を取得・設定
cols/rowsプロパティ

unknown

フレームオブジェクト.cols = 行1[, 行2 … ]
フレームオブジェクト.rows = 列1[, 列2, … ]

colsプロパティは、親フレーム(frameset要素)のcols属性を取得・設定します。 rowsプロパティは、親フレーム(frameset要素)のrows属性を取得・設定します。 フレームのサイズは、ピクセルまたはパーセンテージで指定します。 分割する場合は、カンマ区切りで指定します。

親フレームのサイズを取得

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <title>フレーム</title>
    </head>
    <frameset cols='20%,60%,20%' rows='20%,80%' id="main">
        <frame src="/module/include/js/frame/colsrows/1.html" />
        <frame src="/module/include/js/frame/colsrows/2.html" />
        <frame src="/module/include/js/frame/colsrows/3.html" />
        <frame src="/module/include/js/frame/colsrows/4.html" />
        <frame src="/module/include/js/frame/colsrows/5.html" />
        <frame src="/module/include/js/frame/colsrows/6.html" />
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>
子フレーム(5.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <title>5.html</title>
        <script type="text/javascript">
            function fGetCols(){
                alert("cols="+parent.document.getElementById("main").cols);
            }
            function fGetRows(){
                alert("rows="+parent.document.getElementById("main").rows);
            }
        </script>
    </head>
    <body style="background-color:#ccccff;">
        <h1>5</h1>
        <form action="#">
            <input type="button" value="親フレームの横方向の数値とサイズを取得" onclick="fGetCols()" /><br>
            <input type="button" value="親フレームの縦方向の数値とサイズを取得" onclick="fGetRows()" />
        </form>
    </body>
</html>

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

unknown

フレームオブジェクト.frameBorder = 1 または 0

frameBorderプロパティは、フレームの枠線を取得・設定します。 IE、Firefox共に対応しています。 取得・設定の動作で値はきちんと反映されるのですが、表示がうまくいかないようです。 ウィンドウをリサイズすると反映されたりとか。。。

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>フレームの枠線を取得・設定</title>
    </head>
    <frameset cols='20%,80%' id="main">
        <frame src="/module/include/js/frame/frameBorder/left.html" frameborder="1" id="leftFrame" />
        <frame src="/module/include/js/frame/frameBorder/right.html" frameborder="0" id="rightFrame" />
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
<html>
右フレーム(right.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>right.html</title>
        <script type="text/javascript">
            function fSetFrameBorder(frameID,flag){
                var obj=parent.document.getElementById(frameID);
                obj.frameBorder=flag;
                if(flag==1){
                    obj.borderColor="orange";
                    
                }else{
                    obj.borderColor="";
                }
                var s="frameID: "+frameID+"<br \/>frameBorder: "+obj.frameBorder+"<br \/>borderColor: "+obj.borderColor+"<br \/>";
                document.getElementById("resGetFrameBorder").innerHTML=s;
            }
            function fGetFrameBorder(frameID){
                var obj=parent.document.getElementById(frameID);
                var fb=obj.frameBorder;
                var s="frameID: "+frameID+"<br \/>frameBorder: "+fb+"<br \/>borderColor: "+obj.borderColor+"<br \/>";
                document.getElementById("resGetFrameBorder").innerHTML=s;
            }
        </script>
    </head>
    <body style="background-color:#eee;">
        <h1>right</h1>
        <p>
            <input type="button" onclick="fSetFrameBorder('leftFrame',0)" value="左フレームの枠線をとる" />
            <input type="button" onclick="fSetFrameBorder('rightFrame',0)" value="右フレームに枠線をとる" />
        </p>
        <p>
            <input type="button" onclick="fSetFrameBorder('leftFrame',1)" value="左フレームに枠線をつける" />
            <input type="button" onclick="fSetFrameBorder('rightFrame',1)" value="右フレームに枠線をつける" />
        </p>
        <p>
            <input type="button" onclick="fGetFrameBorder('leftFrame')" value="左フレームの枠線設定を取得" />
            <input type="button" onclick="fGetFrameBorder('rightFrame')" value="右フレームの枠線設定を取得" />
        </p>
        <p id="resGetFrameBorder"></p>
    </body>
</html>

フレームをHTMLオブジェクトとして返す
contentDocumentプロパティ ※IE未対応

unknown

フレームオブジェクト.contentDocument
Firefoxのみ

指定したフレームの文書をHTMLオブジェクトとして返します。

左フレームの文書タイプを取得

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript &raquo; Frame &raquo; フレームの文書タイプを取得 : PHP & JavaScript Room</title>
    </head>
    <frameset cols='20%,80%' id="main">
        <frame src="/module/include/js/frame/contentDocument/left.html" id="leftFrame" />
        <frame src="/module/include/js/frame/contentDocument/right.html" id="rightFrame" />
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>
右フレーム(right.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>right.html</title>
        <script type="text/javascript">
            function fGetContentDocument(){
                var s="";
                if(navigator.userAgent.indexOf("MSIE")>-1){
                    s="IEでframeオブジェクトの<strong>contentDocumentプロパティ<\/strong>はサポートされていません。Firefoxなど他のブラウザでご覧ください。"
                }else{
                    var obj=parent.document.getElementById("leftFrame");
                    var contDoc=obj.contentDocument;
                    s=contDoc.documentElement.tagName;
                }
                document.getElementById("resGetContentDocument").innerHTML=s;
            }
        </script>
    </head>
    <body style="background-color:#eee;">
        <h1>right</h1>
        <form action="#">
            <input type="button" onclick="fGetContentDocument()" value="左フレームの文書タイプを取得" />
            <p id="resGetContentDocument"></p>
        </form>
    </body>
</html>

フレーム文書が定義されている文書のURLを取得・設定
longDescプロパティ

unknown

フレームオブジェクト.longDesc = URL;

longDescプロパティは、フレーム文書が定義されている文書のURLを取得・設定します。

相対パスで指定する場合、以下のようにIEとFirefoxでは同じページにも限らずパス指定が異なるようなので、絶対パス(http://~)で指定しましょう。

IE: ./longdesc.html
FF: ./include/js/frame/longdesc/longdesc.html

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript &raquo; Frame &raquo; フレーム文書で定義されているURLを取得 : PHP & JavaScript Room</title>
    </head>
    <frameset cols='20%,80%' id="main">
        <frame src="/module/include/js/frame/longdesc/longdesc.html" longdesc="http://phpjavascriptroom.com/include/js/frame/longdesc/longdesc.html" id="leftFrame" />
        <frame src="/module/include/js/frame/longdesc/right.html" id="rightFrame" />
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>
右フレーム(right.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>right.html</title>
    </head>
    <body style="background-color:#eee;">
        <h1>right</h1>
        <script type="text/javascript">
            var obj=parent.document.getElementById("leftFrame");
            document.write("<p>&raquo;&nbsp;<a href='"+obj.longDesc+"'>このフレームの定義はコチラ<\/a><\/p>");
        </script>
    </body>
</html>

フレームのリサイズを禁止
noResizeプロパティ

unknown

フレームオブジェクト.noResize = true | false

noResizeプロパティはフレームのリサイズの許可・不許可を取得・設定します。 第1引数にTRUEの指定した場合は、フレームのリサイズができなくなります。 FALSEを指定した場合は、フレームのリサイズが許可されます。

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript &raquo; Frame &raquo; フレームのリサイズの許可・不許可を設定・取得 : PHP & JavaScript Room</title>
    </head>
    <frameset cols='20%,80%' id="main">
        <frame src="/module/include/js/frame/noResize/left.html" id="leftFrame" />
        <frame src="/module/include/js/frame/noResize/right.html" id="rightFrame" />
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>
右フレーム(right.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>right.html</title>
        <script type="text/javascript">
            function fSetNoResize(bool){
                parent.document.getElementById("leftFrame").noResize=bool;
                parent.document.getElementById("rightFrame").noResize=bool;
            }
        </script>
    </head>
    <body style="background-color:#eee;">
        <h1>right</h1>
        <form action="#">
            <input type="button" value="フレームのリサイズ不許可" onclick="fSetNoResize(true)" />
            <input type="button" value="フレームのリサイズ許可" onclick="fSetNoResize(false)" />
        </form>
    </body>
</html>

フレームのスクロールバーを表示・非表示
scrollingプロパティ ※IE未対応

unknown

フレームオブジェクト.scrolling = "yes" | "no" | "auto"
Firefoxのみ

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

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

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript &raquo; Frame &raquo; フレームのスクロールバーを取得・設定 : PHP & JavaScript Room</title>
    </head>
    <frameset cols='20%,80%' id="main">
        <frame src="/module/include/js/frame/scrolling/left.html" id="leftFrame" />
        <frame src="/module/include/js/frame/scrolling/right.html" id="rightFrame" />
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>
右フレーム(right.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>right.html</title>
        <script type="text/javascript">
            function fFrameScrolling(frameID,flag){
                parent.document.getElementById(frameID).scrolling=flag;
                document.getElementById("resFrameScrolling").innerHTML=frameID+"のスクロールバー:"+parent.document.getElementById(frameID).scrolling+"<br \/>";
            }
        </script>
    </head>
    <body style="background-color:#eee;">
        <h1>right</h1>
        <p>※Frameオブジェクトのscrollingプロパティは「Firefox」のみ対応</p>
        <form action="#">
            <input type="button" value="左フレームのスクロールバー有効" onclick="fFrameScrolling('leftFrame','yes')" />
            <input type="button" value="右フレームのスクロールバー有効" onclick="fFrameScrolling('rightFrame','yes')" />
            <br>
            <input type="button" value="左フレームのスクロールバー無効" onclick="fFrameScrolling('leftFrame','no')" />
            <input type="button" value="右フレームのスクロールバー無効" onclick="fFrameScrolling('rightFrame','no')" />
        </form>
        <p id="resFrameScrolling"></p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
</html>

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

unknown

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

srcプロパティはフレームのsrc属性に指定したURL(フレーム内に表示するページのURL)を取得・設定します。 Firefoxでは、src属性に相対パスを指定している場合も取得される値は絶対パス(URL)になります。

親フレーム(index.html)サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript &raquo; Frame &raquo; フレーム内に読み込むページのURLを取得・設定 : PHP & JavaScript Room</title>
    </head>
    <frameset cols='30%,70%' id="main">
        <frame src="/module/include/js/frame/frameSrc/left.html" id="leftFrame" />
        <frame src="/module/include/js/frame/frameSrc/right.html" id="rightFrame" />
        <noframes>
            <body>
                <p>フレーム対応のブラウザでご覧下さい。</p>
            </body>
        </noframes>
    </frameset>
</html>
右フレーム(right.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>right.html</title>
    </head>
    <body style="background-color:#eee;">
        <h1>right</h1>
    </body>
</html>

関連コンテンツ

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

投票する 投票結果を見る

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

pagetop

polarized women