質問編集履歴

2 期待通りに動かない内容が不足していたので追記した

tchofu

tchofu score 87

2015/07/31 18:11  投稿

WindowsのChromeはJavaScriptを使ってモードレスダイアログから元のウィンドウに値をセットできない理由は?
CentOS 6で期待通り動くHTML/JavaScriptのページが、Winodws 7のChromeでは動きません。ちなみに、WindowsのFirefoxでは期待通り動きます。
CentOS 6で期待通り動くHTML/JavaScriptのページが、Winodws 7のChromeでは動きません。ダイアログから元のウィンドウに値が渡りません。ちなみに、WindowsのFirefoxでは期待通り動きます。
そのプログラムとは、JavaScriptでモードレスダイアログを実現する例として作ったもので、以降に示したように作っています。コーディング方法がまずいのでしょうか?それとも、Windowsでは動かないものなんでしょうか?
main.html:
```html
<!-- http://shoyu-ramen23.jugem.jp/?eid=203 -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
<!--
   http://www.ne.jp/asahi/hishidama/home/tech/jscript/dialog.html
 -->
<SCRIPT language="JavaScript">
   function popup_modeless(url) {
       var newWin = window.open(
               'about:blank',   //ダミーの移動先
               'pop', //ターゲット名(formタグのtargetと同じ値にする)
               "width=320, height=180"
       );
       var f = document.form01;
       f.action = url;
       f.submit();
       newWin.focus();
   }
</SCRIPT>
window.openで開いた子ウィンドウからwindow.openerプロパティを使って親ウィンドウのテキストボックスに値を設定する
<input value="子ウィンドウを開く" type="button" onclick="popup_modeless('dialog.html')">
<div id="title01"></div>
<form action="" name="form01" target="pop">
   <label for="subject01">架空の入力1</label>
   <input name="text01" readonly="readonly" id="subject01" type="text">
</form>
</body>
</html>
```
dialog.html:
```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <script src="js/sample.js" type="text/javascript"></script>
</head>
<body>
果物を選んで下さい
<ul>
   <li><a href="javascript:setFormInput('いちご');">いちご</a></li>
   <li><a href="javascript:setFormInput('りんご');">りんご</a></li>
   <li><a href="javascript:setFormInput('みかん');">みかん</a></li>
</ul>
<input type="button" value="子ウィンドウを閉じる" onClick="window.close();">
</body>
</html>
```
js/sample.js:
```javascript
/*
親ウィンドウのテキストボックスへ値をセット
*/
function setFormInput(string) {
   if (!window.opener || window.opener.closed) {
       window.close();
   } else {
       // window.openerを使って開いた元のDOMにアクセスできる
       window.opener.document.getElementById('title01').innerHTML = string;
       window.opener.document.form01.text01.value = string;
   }
}
```
  • JavaScript

    38570 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    24864 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1 Chromeだけ期待通り動かない点が説明から抜けていた。

tchofu

tchofu score 87

2015/07/31 17:00  投稿

WindowsのChromeはJavaScriptを使ってモードレスダイアログから元のウィンドウに値をセットできない理由は?
CentOS 6で期待通り動くHTML/JavaScriptのページが、Winodws 7では動きません。
CentOS 6で期待通り動くHTML/JavaScriptのページが、Winodws 7のChromeでは動きません。ちなみに、WindowsのFirefoxでは期待通り動きます。
そのプログラムとは、JavaScriptでモードレスダイアログを実現する例として作ったもので、以降に示したように作っています。コーディング方法がまずいのでしょうか?それとも、Windowsでは動かないものなんでしょうか?
main.html:
```html
<!-- http://shoyu-ramen23.jugem.jp/?eid=203 -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
<!--
   http://www.ne.jp/asahi/hishidama/home/tech/jscript/dialog.html
 -->
<SCRIPT language="JavaScript">
   function popup_modeless(url) {
       var newWin = window.open(
               'about:blank',   //ダミーの移動先
               'pop', //ターゲット名(formタグのtargetと同じ値にする)
               "width=320, height=180"
       );
       var f = document.form01;
       f.action = url;
       f.submit();
       newWin.focus();
   }
</SCRIPT>
window.openで開いた子ウィンドウからwindow.openerプロパティを使って親ウィンドウのテキストボックスに値を設定する
<input value="子ウィンドウを開く" type="button" onclick="popup_modeless('dialog.html')">
<div id="title01"></div>
<form action="" name="form01" target="pop">
   <label for="subject01">架空の入力1</label>
   <input name="text01" readonly="readonly" id="subject01" type="text">
</form>
</body>
</html>
```
dialog.html:
```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <script src="js/sample.js" type="text/javascript"></script>
</head>
<body>
果物を選んで下さい
<ul>
   <li><a href="javascript:setFormInput('いちご');">いちご</a></li>
   <li><a href="javascript:setFormInput('りんご');">りんご</a></li>
   <li><a href="javascript:setFormInput('みかん');">みかん</a></li>
</ul>
<input type="button" value="子ウィンドウを閉じる" onClick="window.close();">
</body>
</html>
```
js/sample.js:
```javascript
/*
親ウィンドウのテキストボックスへ値をセット
*/
function setFormInput(string) {
   if (!window.opener || window.opener.closed) {
       window.close();
   } else {
       // window.openerを使って開いた元のDOMにアクセスできる
       window.opener.document.getElementById('title01').innerHTML = string;
       window.opener.document.form01.text01.value = string;
   }
}
```
  • JavaScript

    38570 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    24864 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る