ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
新しく開かれたウインドウのウインドウコントロール
日時: 2014/03/16 20:55
名前: lightbox



アンカーまたはフォームで target 属性によってで開かれるウインドウは、そのウインドウを開いたウインドウを opener で知る事ができます。
target 属性によるサンプル http://lightbox.matrix.jp/ginpro/html/win_control_01.htm ▼ textField
こちら側では、アンカーで新しく開かれたウインドウを知る事ができないので、変数を用意しておいて、新しく開いたウインドウ側でセットしてもらいます
  こちら側の記述
<input type="text" name="textField">
<script type="text/javascript">

var openObject = null;

</script>
<input type="button" value="アンカーで開いたウインドウを閉じる" onclick="if( !openObject != null ) { openObject.close(); }">
  開いたウインドウの記述
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<input type="button" value="データをセット" onclick='doAction();'>

<script>
// *********************************************************
// このウインドウを開いたウインドウにアクセス
// *********************************************************
function doAction( strValue ) {

	var opener = window.opener;

	opener.document.getElementsByName("textField")[0].value = "データをセット";

}

// *********************************************************
// ロード時のイベント登録
//
// onload 時に screen オブジェクトが有効にならないので
// タイマーを使用している
// *********************************************************
window.onload = function () {
	// このウインドウを開いたウインドウのグローバル変数に、
	// このウインドウオブジェクトをセット( 向こう側からこちら側にアクセス用 )
	opener.openObject = window;
}

window.onbeforeunload = function() {
	alert("閉じます : onbeforeunload");
}

$(window).bind('beforeunload', function() {
	alert("閉じます : onbeforeunload(jQuery)");
});
</script>
メンテナンス

元のウインドウから、開いたウインドウを操作 ( target 属性 ) ( No.1 )
日時: 2014/03/16 20:56
名前: lightbox


日時: 2014/03/16 20:56
名前: lightbox
開いたウインドウ側で、元のウインドウ内の変数に オブジェクトをセットする事によって操作可能です

http://lightbox.matrix.jp/ginpro/html/win_control_01.htm


開いたウインドウを閉じる




<script type="text/javascript">

function closeWindow() {
	try {
		if ( openObject.closed ) {
			alert("ウインドウはウインドウ側で閉じられました");
		}
		else {
			openObject.close();
		}
		openObject = null;
	}
	catch(e) {
		alert("ウインドウが存在しません");
	}
}

</script>
<input type=button value="閉じる" onclick="closeWindow();">
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
window.open で開く場合 ( No.2 )
日時: 2014/03/16 21:24
名前: lightbox
window.open で開く場合は、その時に新しいウインドウのオブジェクトを取得できます。

さらに、新しいウインドウの見栄えもコントロールできます。
( タブブラウザでも、新しいウインドウが開きます )
▼ textField2 : :
<input
	type="button"
	onclick='
		openObject = window.open(
			"html/win_control_02.htm",
			null,
			"height=400"+
			",width=400"+
			",status=yes"+
			",toolbar=no"+
			",menubar=no"+
			",location=no"+
			",top=0"+
			",left="+(screen.width-400-20)
		);
	'
	value="新しいウインドウを開く"
> : <input type="button" value="閉じる" onClick="closeWindow();">
  開いたウインドウの記述
// *********************************************************
// このウインドウを開いたウインドウにアクセス
// *********************************************************
function doAction( strValue ) {

	var opener = window.opener;

	opener.document.getElementsByName("textField2")[0].value = "データをセット";

}
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
モーダルダイアログ的なウインドウコントロール ( No.3 )
日時: 2014/03/16 21:43
名前: lightbox
2014/06/16
昔 Opera がこの処理で動いていました。現在、Google Chrome が Modal Dialog が動作しないのでこの方法を試してみましたが、focus メソッドが動作しませんでした
 しかし、戻り値は返り、処理されているようです 

※ 過去に Google Chrome は ModalDialog が動作していたはずです。
※ 当時、Opera は ModalDialog が実装されていません。
  こちら側の記述
function focusAction() {
	try {
		if ( !window.closed ) {
			openObject.focus();
		}
	}
	catch( e ) {
	}
}

window.onfocus = focusAction
window.onactivate = focusAction
  開いたウインドウの記述
function blurAction() {

	window.opener.focus();
	window.focus();

}

window.onblur = blurAction;
window.onactivate = blurAction;
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
IE と Firefox で実装可能なモーダルダイアログ ( No.4 )
日時: 2014/03/16 21:45
名前: lightbox
 : 



showModalDialog の第二引数は配列等も引渡しできます
  こちら側の記述
<input type="button" value="モーダルダイアログ" onClick="doModalDialog();">
<script type="text/javascript">

function doModalDialog() {

	var ret = window.showModalDialog(
		"html/win_control_03.htm" ,
		window,
		"dialogWidth:600px;dialogHeight:500px;"
	);

	alert(ret);

}

</SCRIPT>
  開いたウインドウの記述
var dialogOpener;

// *********************************************************
// このウインドウを開いたウインドウにアクセス
// *********************************************************
function doAction( strValue ) {


	dialogOpener.document.getElementsByName("textField3")[0].value = "データをセット";

}

// *********************************************************
// ロード時のイベント登録
// 
// 引数にセットされているこのウインドウを開いたウインドウ
// のオブジェクトを保存する
// *********************************************************
window.onload = function loadAction() {

	dialogOpener = window.dialogArguments;

}

// *********************************************************
// アンロード前のイベント登録
// 
// このダイアログの戻り値をセット
// *********************************************************
window.onbeforeunload = function beforeunloadAction() {

	window.returnValue = "戻り値";

}
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
ダイアログで送ったフォームデータをダイアログで取得するには ( No.5 )
日時: 2007/10/05 16:54
名前: lightbox
フォームを記述した URL をトップとしてダイアログに表示する場合には
ダイアログのヘッド部に以下の記述を行います

 
<BASE target="_self">

トップにフレームを表示する場合はその必要はありません( 通常通り )
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
開いたウインドウで更新した内容を元のウインドウに反映するには ( No.6 )
日時: 2014/06/23 20:22
名前: lightbox
現状では、URL にユニークな文字列を加えて、なんらかの方法でページを再表示するのが確実です
このアーティクルの参照用URLをクリップボードにコピー メンテナンス