JavaScript

ブラウザをフルスクリーン表示する方法【JavaScript】

JavaScriptを使ってブラウザをフルスクリーンで表示する方法をご紹介します。
昔Flashで作ったサイトをフルスクリーンで表示させる時に使ってました。

フルスクリーンページ呼出元のJavaScriptの記述

※呼出元ページからリンククリックでフルスクリーンページを表示させます。window.open()を使います。

<script type="text/JavaScript">
<!--
function openWin(theURL,winName,features) {
  window.open(theURL,winName,features);
}
//-->
</script>

呼出元ページのリンクのHTML記述

※上記で作った関数openWin()をhrefに記載して呼び出します。

<a href="javascript:openWin('full.html','main','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=1000,height=550');" title="ブラウザをフルスクリーン表示するJavaScriptのデモ(呼出先)">>このリンクをクリック</a>
  • full.htmlはフルスクリーンで表示する呼出先のhtml
  • widthとheightのサイズは任意

呼出先(フルスクリーン表示)ページのJavaScriptの記述

※下記をヘッダーに記述して下さい。.moveTo()でブラウザ位置、.resizeTo()でブラウザサイズ、.focus()でフルスクリーンブラウザにフォーカスさせます。

<script language="JavaScript" type="text/JavaScript">
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
self.focus();
</script>

呼出先(フルスクリーン表示)ページのCSSとHTMLの記述

※以下は必要に応じて変更して下さい。

CSSの記述

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.2em;
	text-align:center;
}
a{
	font-size:16px;
	text-decoration:none;
}
-->
</style>

HTMLの記述

<h1>ブラウザをフルスクリーン表示するJavaScriptのデモ(呼出先)</h1>
<div align="center">
ブラウザがフルスクリーンで表示されます。
</div>

ブラウザをフルスクリーン表示するJavaScriptのデモ(呼出元)ページ

ブラウザをフルスクリーン表示するJavaScriptのデモ(呼出元)

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。