フレーム／フレームセット｜frameオブジェクト｜JavaScript/DOM

TOP JavaScript/DOMフレーム／フレームセット

フレームの書き方
フレームの分割方法
フレームを指定して印刷
フレームリンクされたら、トップページへ飛ばす
複数のフレームを同時に変更〔フレーム数取得、フレーム名取得、フレームのURL取得〕
他のフレームを操作
ウィンドウ内のフレーム数を取得〔window.length〕
Frameset/frameオブジェックト一覧
フレームセットの分割方法を取得･設定〔cols/rowsメソッド〕
親フレーム（frameset）の分割方法を取得･設定〔cols/rowsプロパティ〕
フレームの枠線の表示・非表示を取得・設定〔frameBorderプロパティ〕
フレームをHTMLオブジェクトとして返す〔contentDocumentプロパティ　※IE未対応〕
フレーム文書が定義されている文書のURLを取得･設定〔longDescプロパティ〕
フレームのリサイズを禁止〔noResizeプロパティ〕
フレームのスクロールバーを表示・非表示〔scrollingプロパティ　※IE未対応〕
フレーム内に読み込むページのURLを取得･設定〔srcプロパティ〕

フレームの書き方

unknown

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

フレームのデザインによって子フレームの数や親フレームの属性指定（rows、cols）が異なります。 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>

フレームリンクされたら、トップページへ飛ばす

unknown

window.top.location.href = 'フレームのトップページのURL'

子フレーム（frame要素）のsrc属性にトップページのURLを指定することも可能ですが、JavaScriptで制御するには、以下の例のようにwindow.top.location.hrefを子フレーム内に記述します。

アクセスされたURLがフレームのトップページでない場合に、自動的にフレームのトップページを表示するため、フレームリンク対策（子フレームにリンクを貼られること）になります。

<!-- 子フレーム内に記述 -->
<script type="text/javascript">
    var frametop = "フレームのトップページのURL";
    /* アクセスされたページがフレームのトップページでない場合 */
    if(window.top.location.herf != frametop){
        /* 強制的にフレームのトップページを表示する */
        window.top.location.href = frametop;
    }
</script>

複数のフレームを同時に変更
フレーム数取得、フレーム名取得、フレームの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オブジェクト
プロパティ	説明
contentDocument	HTMLオブジェクトとしてフレームを返す
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プロパティは、フレームのスクロールバーを取得・設定します。

親フレーム（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>

Stringオブジェクト 文字列オブジェクト

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

PHP & JavaScript Room

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

フレームの書き方

フレームの分割方法

左右分割

上下分割

フレームを指定して印刷

フレームリンクされたら、トップページへ飛ばす

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

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

他のフレームを操作

他のフレームを操作

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

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

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

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

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

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

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

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

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

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

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

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

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

関連コンテンツ

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

フレームの書き方

フレームの分割方法

左右分割

上下分割

フレームを指定して印刷

フレームリンクされたら、トップページへ飛ばす

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

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

他のフレームを操作

他のフレームを操作

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

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

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

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

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

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

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

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

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

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

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

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

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

関連コンテンツ

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

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

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

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

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

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

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

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

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

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