jQueryで別窓表示
jQueryを使って別ウィンドウを表示
jQuery
$(function () {
// リンク形式
// $(this).prop('href') = 'http://php.o0o0.jp/'
// $(this).attr('href') = '/'
// this.href = $(this).prop('href')
$('#link').click(function(){
// hrefで指定されたURLが別窓で開く
winOpen(this.href, 300, 200);
return false;
});
// ボタン形式
$('#button').click(function(){
// formのactionで指定されたURLが別窓で開く
winOpen($('form').attr('action') , 300, 200);
return false;
});
/**
* 別窓
* @param {string} url
* @param {int} width
* @param {int} height
*/
function winOpen(url, width, height)
{
// 幅上限
if (width > 800) {
width = 800;
}
// 高さ上限
if (height > 600) {
height = 600;
}
window.open(url, '_blank', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=' + width + ', height=' + height);
}
});
toolbar：ツールバーの表示、location：ロケーションバーの表示、directories：ユーザ設定ツールバーの表示、status：ステータスバーの表示、menubar：メニューバーの表示、 scrollbars：スクロールバーの可否、resizable：リサイズの可否、width：幅（px）、height：高さ（px）。
非jQuery版
JavaScript
window.addEventListener('load', function() {
// リンク形式
document.getElementById('link').addEventListener('click', function(e) {
// hrefで指定されたURLが別窓で開く
winOpen(this.href, 300, 200);
e.preventDefault();
});
// ボタン形式
document.getElementById('button').addEventListener('click', function() {
// formのactionで指定されたURLが別窓で開く
winOpen(document.forms[0].action, 300, 200);
return false;
});
});
HTML
<a href="/" id="link">別窓（リンク形式）</a>
<form action="/">
<input type="button" id="button" value="別窓（ボタン形式）">
</form>
サンプル
