window.openを利用して別画面を表示させることは結構あると思うのですが、
呼び出した画面(以下、子画面)から呼び出し元画面(以下、親画面)の値を
JavaScriptで書き換える時の動作がIEとChromeとで動作が異なっていました。
動作条件としては少し特殊なのですが、下記の２つです。
- 複数の画面から子画面を呼び出す
- 子画面の名前は同じ（呼び出す度に子画面は更新される）
動作の違いについては下記の通りです。
| ブラウザ | JavaScriptで子画面から親画面の値を 変更した時の動作内容 |
|---|---|
| IE | 一番最初に子画面を開いた親画面の値が書き換わる |
| Chrome | 一番最後に子画面を開いた親画面の値が書き換わる |
動作的にはChrome側の動きの方がしっくりと来るのですが、
EDGEでも動作は同じだったので仕様みたいですね。
基本的には呼び出し時に別々な名前を子画面につけて
子画面を複数表示できるようにした方がいいですが、
どうしてもという場合は気をつけたほうが良さそうですね。
動作確認用のサンプルソースは↓です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function openWindow() {
// 高さと幅を指定
var width = 300;
var height = 300;
// スクロールバーの有無を設定
var scrollbar = 1;
var original_action = document.forms[0].action;
// サブが麺を表示する
var subWnd = window.open('about:blank', 'subWindwow', 'width='+ width + ',height=' + height + ',menubar=0,toolbar=0,location=0,directories=0,status=0,scrollbars=' + scrollbar + ',resizable=1');
// 各種操作
document.forms[0].target = 'subWindwow';
document.forms[0].action = 'subWindow.html';
document.forms[0].submit();
document.forms[0].target = '_self';
document.forms[0].action = original_action;
}
</script>
</head>
<body>
<form method="post">
<!-- 変更確認用 -->
<input type="text" value="" name="outputTextBox" disabled="disabled">
<!-- サブ画面表示用 -->
<input type="button" value="サブ画面表示" onclick="openWindow()">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function changeValueParentWindow() {
// 呼び出し元画面のテキストボックスの値を変更する
var parentWnd = window.opener.document.forms[0].outputTextBox;
parentWnd.value = "変更！";
}
</script>
</head>
<body>
<!-- 変更ボタン -->
<form method="post">
<input type="button" value="呼び出し元画面 値変更" onclick="changeValueParentWindow()">
</form>
</body>
</html>
Web系の仕事をやり始めて色々と気付く_(:3｣∠)_
