SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [FULL SCREEN SCRIPT]

FULL SCREEN SCRIPT

機能

ブラウザを開くと殆どの場合、ツールバーやタイトルバーなどが表示され、コンテンツを表示できる領域は限られています。これらの余分な部分を表示せずにフルスクリーンで表示します。余分な飾りが表示されないため、様々なレイアウトが試せます。

ただし、閉じるボタンなども非表示なるため、ウインドウを閉じるスクリプトも必要になります。また、IE4以上での対応です。

類似サンプル

利用方法

HEAD部分にスクリプトを記述します。リンク（Href属性）からこのスクリプトを呼び出します。ブラウザによっては対応していないため、スクリプトで振り分けをします。

「fullscreen=1」でフルスクリーンを指定しています。 「href="JavaScript:window.close()"」でウインドウを閉じることが出来るので、フルスクリーン側には必ず指定するようにしましょう。指定方法などは下記のみです。サンプルには余分な機能などを多く追加しているだけです。

フルスクリーン指定

window.open("sp47_1.html","","fullscreen=1,scrollbars");

sp47_1.html: 開く先のURL
fullscreen=1: フルスクリーン表示
scrollbars: スクロールバー非表示

※ウインドウを開く際のオプションはこの他にも多くあります。「ちびウインドウ」をご覧下さい。

ウインドウを閉じる

window.close()

ここでのサンプルには、「エンディング？！：２」との組み合わせをしています。

対応ブラウザ

IE4以上

サンプル

［サンプルを見る］［ダウンロード］

[Go To Top]

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>FULL SCREEN SCRIPT</title>

<style type="text/css">
<!--
A{
	text-decoration:	none;
	font-size:			24pt;
	font-weight:		bold;
}
A:Link{
	color:				#00f;
}
A:Visited{
	color:				#66f;
}
A:Active{
	color:				#00f;
}
A:Hover{
	color:				#f00;
	text-decoration:	underline;
	background-color:	#fdd;
}
.center{
	text-align:			center;
}
-->
</style>

<script language="JavaScript">
<!--
var brw_v=navigator.appVersion.charAt(0);
var brw_n=navigator.appName.charAt(0);
var iIE4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;

function full(){
	if(iIE4){
		window.open("sp47_1.html","","fullscreen=1,scrollbars");
	}else{
		alert("IE4以上で可能です");
	}
}
// -->
</script>

</head>

<body>

<div class="center">
<a href="JavaScript:full()">FULL SCREEN</a><br>
<a href="JavaScript:history.back()">BACK</a>
</div>

</body>

</html>

[Go To Top]