JavaScript

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

  /

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

Contents
  1. フルスクリーンページ呼出元のJavaScriptの記述
  2. 呼出元ページのリンクのHTML記述
  3. 呼出先（フルスクリーン表示）ページのJavaScriptの記述
  4. 呼出先（フルスクリーン表示）ページのCSSとHTMLの記述
  5. ブラウザをフルスクリーン表示するJavaScriptのデモ（呼出元）ページ

フルスクリーンページ呼出元の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アナリティクスタグは流用しないで下さい。

フルスクリーン
RELATED POST