SQLの窓 イラストAC フリー素材

2014年06月23日

jQuery/JavaScript : 新しく開かれたウインドウのウインドウコントロール

新しいウインドウを開く方法としては、アンカーから開く場合と window.open から開く場合に大きく分かれますが、前者のほうは開かれたほうから親ウインドウを参照可能(window.opener)ですが、親ウインドウから子ウインドウの参照ができないので、子ウインドウ側で、親ウインドウにウインドウを引き渡す必要があります。

※ Window を閉じる場合、IE だけ確認ダイアログが出るのでそれを回避するコードを実装しています

▼ 親ウインドウ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リンクから開いたウインドウのアクセス(親)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ▼ この変数に、開いたウインドウから値をセットします
var childWindow = null;
var userAgent = window.navigator.userAgent.toLowerCase();
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	$("#closeButton")
		.attr("type","button")
		.val("閉じる")
		.click(function(){
			if (userAgent.indexOf("msie") > -1 || userAgent.indexOf("trident/7.0") > -1 ) {
				(childWindow.open("","_self")).close();
			}
			else {
				childWindow.close();
			}
		});

});
</script>

</head>
<body>

<input id="closeButton">
<br><br>

<a href="link2winChild.php?id=childWindow" target="_blank">新しいウインドウを開く</a>

</body>
</html>


▼ 子ウインドウ( php です )
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リンクから開いたウインドウのアクセス(子)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	window.opener.<?= $_GET['id'] ?> = window;

	$("#closeButton")
		.attr("type","button")
		.val("閉じる")
		.click(function(){
			if (window.opener.userAgent.indexOf("msie") > -1 || window.opener.userAgent.indexOf("trident/7.0") > -1 ) {
				(window.open("","_self")).close();
			}
			else {
				window.close();
			}
		});

});
</script>

</head>
<body>

<input id="closeButton">

</body>
</html>


これに対して、window.open の場合は、相互に参照する事ができます。

▼ 親ウインドウ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window.open から開いたウインドウのアクセス(親)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ▼ この変数に、window.open の戻り値をセットします
var childWindow = null;
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	$("#closeButton")
		.attr("type","button")
		.val("閉じる")
		.click(function(){
			childWindow.close();
		});

	$("#openContent")
		.attr("href","#")
		.click(function( event ) {
			// メソッドでウインドウを開く
			// status 以降はブラウザによって違います
			childWindow = window.open(
				"open2winChild.php",
				null,
				"height=400"+
				",width=400"+
				",top=0"+
				",left="+(screen.width-400-20)+
				",status=yes"+
				",toolbar=no"+
				",menubar=no"+
				",location=no"
			);
			event.preventDefault();
		});

});
</script>

</head>
<body>

<input id="closeButton">
<br><br>

<a id="openContent">新しいウインドウを開く</a>

</body>
</html>


▼ 子ウインドウ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window.open から開いたウインドウのアクセス(子)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	$("#closeButton")
		.attr("type","button")
		.val("閉じる")
		.click(function(){
			window.close();
		});

});
</script>

</head>
<body>

<input id="closeButton">

</body>
</html>

また、window.open の拡張形として showModalDialog というメソッドに関していろいろ情報がありますが、結論として WEB ではいろいろ無理があるようです。今後は jQuert UI のメソッドを使うのが一番簡単な代替だと思いますが、ダイアログ内を別ウインドウとして管理したい場合は、IFRAME を使う事になると思います
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery ダイアログ</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {


	$("#dialog1")
		.attr("type","button")
		.val("モーダルダイアログ")
		.click(function(){

			$( "#text-message" ).text("ダイアログ内部のメッセージです");
			$( "#dialog-message" ).dialog({
				modal: true,
				title: "ダイアログのタイトルです",
				close: function() {
					console.log("x ボタンがクリックされました");
				},
				buttons: [
					{ 
						text: "確認",
						click: function() {
							$( this ).dialog( "close" );
							console.log("確認 ボタンがクリックされました");
						}
					},
					{
						text: "キャンセル",
						click: function() {
							$( this ).dialog( "close" );
							console.log("キャンセル ボタンがクリックされました");
						}
					}
				]
			});

		});

	$("#dialog2")
		.attr("type","button")
		.val("モーダルダイアログ(IFRAME 利用)")
		.click(function(){

			$( "#dialog-iframe" ).dialog({
				modal: true,
				title: "ダイアログのタイトルです",
				width: 720,
				close: function() {
					console.log("x ボタンがクリックされました");
				},
				buttons: [
					{ 
						text: "確認",
						click: function() {
							$( this ).dialog( "close" );
							console.log("確認 ボタンがクリックされました");
						}
					},
					{
						text: "キャンセル",
						click: function() {
							$( this ).dialog( "close" );
							console.log("キャンセル ボタンがクリックされました");
						}
					}
				]
			});

		});


});
</script>


</head>
<body>

<input id="dialog1">
<br><br>
<input id="dialog2">


<div id="dialog-message" title="" style='display:none;'>
<p id="text-message" style="font-weight:bold;color:#CB3232;">
</p>
</div>

<div id="dialog-iframe" title="" style='display:none;'>
<iframe
	src="range.php"
	name="iframe_win"
	id="iframe_win"
	frameborder="0"
	scrolling="no"
	width="680"
	height="380"
	style=''
></iframe>
</div>



</body>
</html>

一つ目のダイアログは、単純に DIV を使用したものです。



二つ目は、その DIV の中に IFRAME で別のウインドウの情報を表示しています。





【jQueryの最新記事】
posted by at 2014-06-23 14:34 | jQuery | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX