Dialog Data

ダイアログでタイプされたデータを持ち帰る

  1. Dialog を呼び出してタイプされたデータを持ち帰ります
    showModalDialog() が使えたときは簡単だったのですが 廃止された ようです。
    ModalDialog は、ダイアログの終了を待ち合わせて次に進むのでリターン値を持ち帰ることが出来ました。
    function mdlg()
    {
      n = showModalDialog("dlg_2.html","dlg","dialogWidth:320px;dialogHeight:240px");
      alert("戻り値は:"+n);
    }
    
  2. 仕方が無いので window.open() を使うことにします。
    window.open メソッドの返り値としてウィンドウオブジェクトが取得出来ます。
    ウィンドウの生成に成功した場合は生成されたウィンドウオブジェクトが返され、失敗した場合は null となります。
    これを利用してダイアログで設定したデータを取得する方法を模索しました。
    かなり怪しげな方法で Windows10 & MicroSoft Edge で実行を確認しましたが Google Chrome では動かないようです。
      var winobj = window.open("dlgvar.html");
    
  3. Dialog でタイプされたデータを持ち帰るソースコードです。
    マウスのクリックでダイアログを開く関数 mdlg() を呼びます。
    window.alert(winobj.status); でデータを取得するのですが、先に window.alert(winobj.location); を実行しないと取得できません。 (^_^;)
    【Source Code】
    <script type="text/javascript">
    <!--
    function mdlg()
    {
      var winobj = window.open("dlgvar.html");
      if (winobj!=null) window.alert(winobj.location);
      if (winobj!=null) window.alert(winobj.status);
    }
    // -->
    </script>
    </head>
    
    <body>
    <h2>Dialog var</h2>
    
    <p><a href="javascript:mdlg()">ダイアログでタイプされたデータを持ち帰る</a></p>
    
  4. データーをタイプ入力する dlgvar.html のソースコードです。
    form から文字列(msg)と数値(val)をタイプして func() 関数を呼び出します。
    func() 関数ではデータを取得して window.status に設定します。
    親では window.status に設定されたデータを取得しています。
    【Source Code】
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="javascript.css" type="text/css">
    <title>Dialog</title>
    <script type="text/javascript">
    <!--
    function func(form)
    {
        var msg = form.msg.value;
        var val = form.val.value;
        window.status = msg + val;
    }
    // -->
    </script>
    </head>
    
    <body>
    <form>
    <input type="text" name="msg" value="Message, "/><br>
    <input type="text" name="val" value="123"/><br><br>
    <input type="button" value="実行" onClick="func(this.form)">
    </form>
    
    </body>
    </html>
    
  5. かなり強引で推奨できる手法では無いのですが、Windows10 & MicroSoft Edge で実行を確認しましたが Google Chrome では動かないようです。
    別の方法としては、ファイルに書き込んで渡すことが考えられますが、これはこれで面倒です。
    現実的にはダイアログを使わずに form を直接組み込む方法がお勧めです。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)