window.open() †
最近の window.open() では、無効なオプションもある。ブラザの対応状況を調べるために、すべてのオプションを指定できるサンプルを作成した。
<!DOCTYPE html>
<html>
<head>
<title>WindowOpen</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<table border="0">
<tr>
<td>top:</td>
<td><input type="text" id="top" value="200"/>
</tr>
<tr>
<td>left:</td>
<td><input type="text" id="left" value="300"/>
</tr>
<tr>
<td>width:</td>
<td><input type="text" id="width" value="800"/>
</tr>
<tr>
<td>height:</td>
<td><input type="text" id="height" value="600"/>
</tr>
<tr>
<td>menubar:</td>
<td>
<input type="radio" name="menubar" value="yes"/>yes
<input type="radio" name="menubar" value="no" checked="checked"/>no
</td>
</tr>
<tr>
<td>toolbar:</td>
<td>
<input type="radio" name="toolbar" value="yes"/>yes
<input type="radio" name="toolbar" value="no" checked="checked"/>no
</td>
</tr>
<tr>
<td>location:</td>
<td>
<input type="radio" name="location" value="yes"/>yes
<input type="radio" name="location" value="no" checked="checked"/>no
</td>
</tr>
<tr>
<td>status:</td>
<td>
<input type="radio" name="status" value="yes"/>yes
<input type="radio" name="status" value="no" checked="checked"/>no
</td>
</tr>
<tr>
<td>resizable:</td>
<td>
<input type="radio" name="resizable" value="yes" checked="checked"/>yes
<input type="radio" name="resizable" value="no"/>no
</td>
</tr>
<tr>
<td>scrollbars:</td>
<td>
<input type="radio" name="scrollbars" value="yes"/>yes
<input type="radio" name="scrollbars" value="no" checked="checked"/>no
</td>
</tr>
<tr>
<td>url:</td>
<td><input type="text" id="url" value="http://www.fujitsu.com/"/>
</tr>
<tr>
<td>target:</td>
<td>
<input type="radio" name="target" value="_blank" checked="checked"/>_blank
<input type="radio" name="target" value="_self"/>_self
<input type="radio" name="target" value="_top"/>_top
<input type="radio" name="target" value="_parent"/>_parent
</td>
</tr>
</table>
<button>OpenWindow</button>
<br>
<div id="options" style="background-color:khaki; margin-top:20px">
</div>
<script>
$('button').on('click', function () {
var option =
'top=' + $('#top').val() +
', left=' + $('#left').val() +
', width=' + $('#width').val() +
', height=' + $('#height').val() +
', menubar=' + $('input[name=menubar]:checked').val() +
', toolbar=' + $('input[name=toolbar]:checked').val() +
', location=' + $('input[name=location]:checked').val() +
', status=' + $('input[name=status]:checked').val() +
', resizable=' + $('input[name=resizable]:checked').val() +
', scrollbars=' + $('input[name=scrollbars]:checked').val();
var url = $('#url').val();
var target = $('input[name=target]:checked').val();
$('#options').text('window.open(\'' + url + '\', \'' + target + '\', \'' + option + '\')');
window.open(url, target, option);
});
</script>
</body>
</html>
子Window と 親Window の連携 †
- 親Window
<html>
<head>
<title>親ウィンドウからサブウィンドウの関数を呼び出す</title>
<script Language="JavaScript"><!--
subWin = window.open("sub.html","sub","width=320,height=240");
function call()
{
subWin.myFunc();
}
// --></script>
</head>
<body>
<a href="javaScript:call()">サブウィンドウの関数を呼び出す</a>
</body>
</html>
- window.open() の返り値の Window オブジェクトを使って、子 Window 側の function() を呼び出すことができる
- 子Window
<html>
<head>
<title>親ウィンドウからサブウィンドウの関数を呼び出す</title>
<script Language="JavaScript"><!--
function myFunc()
{
alert("サブウィンドウ側の関数です");
}
// --></script>
</head>
<body>
サブウィンドウ側
</body>
</html>
- 小画面側からは window.opener で親 Window にアクセスすることができる
HTML
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
