« レノボの2万円以下の7インチAndroidタブレット「IdeaPad Tablet A1」 | トップページ | E17口金タイプもラインナップされた人感センサー付LED電球 »

2011年10月20日 (木)

フレームセットの子フレームに親フレーム側からPOSTする

「今更フレームセットを使うのかよ」って話ですが、場合によっては便利なので使う機会がありました。

で、親フレーム側で受け取ったパラメータを子フレームへ渡すのにはGetパラメータかサーバサイドの仕組みが持ってるセッション変数ぐらいしかありません。

IEの場合は<head>要素に<form>を書いて<frameset>のonLoadイベントでPOSTする事も可能なんですが、ChromeやFirefoxだと<head>要素内の<form>は無視しちゃうため、「Formオブジェクトが無い」とエラーになってしまいます。

じゃ、後からFormオブジェクトを生成してやれ!
って事でコードを書いてみたら上手く行きました。

Formオブジェクトにぶら下がる各パラメータも生成しないとダメですが、この方法であれば、親フレーム側で受け取ったパラメータを子フレームへPOSTする事が可能です。

ちなみに生成したFormオブジェクトは、document.bodyの下に置かないとフォームとして機能しないのでご注意を・・・。

↓以下、サンプルコードです。

<html>
<head>
<title>子フレームPostテスト</title>
<script language='JavaScript'>
<!--//
    function framePost(){
       
        //Formオブジェクトの作成
        var MyForm = document.createElement("FORM");
        document.body.appendChild(MyForm);
       
        //パラメータ用オブジェクトの生成
        var MyInput = document.createElement("INPUT");
        MyInput.setAttribute("type","hidden");
        MyInput.setAttribute("name","value1");
        MyForm.appendChild(MyInput);
       
        //パラメータを子フレームへPOST
        MyInput.value = "上フレーム";
        with(MyForm) {
            action = "test_F1.asp";
            target = "topFrame";
            submit();
        }
        MyInput.value = "下フレーム";
        with(MyForm) {
            action = "test_F1.asp";
            target = "downFrame";
            submit();
        }
    }
//-->
</script>
</head>

<frameset rows="50%,*" onLoad="framePost();">
    <frame name="topFrame">
    <frame name="downFrame">
</frameset>

</html>

|

« レノボの2万円以下の7インチAndroidタブレット「IdeaPad Tablet A1」 | トップページ | E17口金タイプもラインナップされた人感センサー付LED電球 »

技術情報もしくは仕事ネタ」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/26493/42596947

この記事へのトラックバック一覧です: フレームセットの子フレームに親フレーム側からPOSTする:

« レノボの2万円以下の7インチAndroidタブレット「IdeaPad Tablet A1」 | トップページ | E17口金タイプもラインナップされた人感センサー付LED電球 »