新しいウインドウを開く方法としては、アンカーから開く場合と 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 で別のウインドウの情報を表示しています。
posted by
at 2014-06-23 14:34
|
jQuery
|
|
▼ 実行後
最近とてもとても自分が気が小さいのが気になります。
だれかに頼りたいです。
▼ 背景あり(jpg)
Young Night Hawk : フリーダウンロードギャラリーへ移動
上段三日月蹴り : フリーダウンロードギャラリーへ移動
やはり、しょせんフィギュアなのでおもいっきりの上段廻し蹴りは無理だったので、余裕のある位置で三日月蹴りです。三日月蹴りは、横から廻すのでは無く、ねじり込むような前蹴りのような廻し蹴りを想定しています。
ですから、上体にも余裕があります。
この絵を描いてからもう約５年の月日が経過していて、今は DAZ3D の DAZStudio で絵を描くのでは無く、絵を創るほうへ移行してしまいました。とにかく絵を描くには、有り余るほどの才能が必要なので、人生があまり余裕で残っていない自分にとっては、こちらが身分相応です。 昨日創った『後の先』です。もし、よろしければ背景透過 PNG もあるので、自由に使って下さい。
白舟のいろいろな『字』です
いろは
月
月に明朝蠍(表示後、表示ボタンをクリック)
水面月に蠍 更新履歴 2011-08-09 : 初回投稿 2013-08-24 : 画像追加
※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
