新しいウインドウを開く

新しいウインドウを開く場合は、JavaScript の window.open() を使います。window.open() のパラメータで、新しいウインドウのサイズや表示位置、ツールバーの表示非表示など指定することができます。詳しくは、JavaScript のマニュアルをご覧ください。

新しいウインドウとレファラー( refere )

新しいウインドウで、新しいページに来る前の URL を調べたいことがあります。問い合わせフォームや、ユーザ登録などでは、あらかじめ登録してあるページから呼ばれた場合のみ、受付を許可したいものです。
新しいページに来る前の URL は、refere で調べることができます。JavaScript では、document.referrer で読むことができます。PHP の関数では、$_SERVER['HTTP_REFERER'] で確認できます。ただし、対応していないサーバーもあるようです。
通常のページ移動では、refere は、上記の関数で確認できますが、window.open() で開いたページでは、ブラウザによって対応が違うようです。Firefox は対応しています。残念ながら、IE では新しいページになったとき、refere をクリアしてしまうようです。target="_blank" で開いたページも同様でした。
私の場合、新しいウインドウになったとき、PHP で refere を確認したかったのですが、良い方法はありませんでした。本当は、新しいページ側で全て処理をしたかったのですが、できませんでした。仕方が無いので、新しいページを呼ぶときに、サンプルのように引数で呼ぶページの URL をつけることで対応しました。新しいページで引数は、$_GET['ref']で受け取ります。
サンプル: 新しいウインドウと refere

レファラー( refere )を確認するサンプルのソースコード

次にサンプルのソースコードを示します。
<a href="new_window.html" onclick="nw_window(this.href);return false;"> と、href を指定しておくことで、JavaScript がオフになっているブラウザにも対応しています。window.open で開く URL には、urladd + "?ref=" + window.location.href と、自分の URL を引数で指定しました。new_window.html に、PHP の記載がありますが、拡張子 html でも、PHP が実行可能な設定になっていることが前提です。

js_window.html のソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript">
<!--
//新しいウインドウ表示
function nw_window(urladd){ 
    newWin = window.open(urladd + "?ref=" + window.location.href,"","width=640,height=400,resizable=yes");
}
//-->
</script>
<title>JavaScript NEW Window のテスト</title>
</head>
<body>
JavaScript NEW Window のテスト<br>
<br>
<a href="new_window.html" onclick="nw_window(this.href);return false;">new_window.html</a><br>
 ↑ クリックすると新しいウィンドウが開きます<br>
<br>
<a href="new_window2.html">new_window2.html</a><br>
 ↑ クリックすると自動的に新しいウインドウを開くページに移動します<br>
</body>
</html>

new_window.html のソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="content-style-type" content="text/css">
<title>JavaScript NEW Window のページ</title>
</head>
<body>
JavaScript NEW Window のページです<br>
<br>
$_SERVER['HTTP_REFERER']は、”<?php echo $_SERVER['HTTP_REFERER']; ?>” です。<br>
'HTTP_REFERER'が読めない場合は、GETを利用します。<br>
$_GET['ref']は、”<?php echo $_GET['ref']; ?>” です。
</body>
</html>

つぎの、new_window2.html のソースコードは、このページを経由して新しいウインドウを開けないかどうかのチェックで作りました。元のページから通常のリンクで呼び、このページで refere をチェックしてから、新しいウインドウに移動したかったわけです。
残念ながら、オンロードで新しいウインドウを開くと、Firefox でも、IE でも、ポップアップブロックに引っかかってしまいますので、この方法は使えませんでした。

new_window2.html のソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript">
<!--
//新しいウインドウ表示
function new_window(urladd){
    newWin = window.open( urladd,"","width=640,height=400,resizable=yes");
}
//-->
</script>
<title>JavaScript NEW Window2 のページ</title>
</head>
<body>
JavaScript NEW Window2 のページです。<br>
<br>
オンロードで自動的に開こうとするページは、<br>
ポップアップとしてブロックされていると思います。
<br>
<script type="text/javascript">
<!--
new_window('new_window.html');
//-->
</script>
</body>
</html>

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > JavaScript > 新しいウインドウ