js控制頁面的全屏展示和退出全屏顯示的方法
更新時間：2015年03月10日 09:42:35 作者：JESTER_WILL
這篇文章主要介紹了js控制頁面的全屏展示和退出全屏顯示的方法,實例分析了javascript控制頁面全屏效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js控制頁面的全屏展示和退出全屏顯示的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<div style="margin:0 auto;height:600px;width:700px;">
<button id="btn">js控制頁面的全屏展示和退出全屏顯示</button>
<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >
<h1>js控制頁面的全屏展示和退出全屏顯示</h1>
</div>
</div>
</body>
<script language="JavaScript">
document.getElementById("btn").onclick=function(){
var elem = document.getElementById("content");
requestFullScreen(elem);
};
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<div style="margin:0 auto;height:600px;width:700px;">
<button id="btn">js控制頁面的全屏展示和退出全屏顯示</button>
<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >
<h1>js控制頁面的全屏展示和退出全屏顯示</h1>
</div>
</div>
</body>
<script language="JavaScript">
document.getElementById("btn").onclick=function(){
var elem = document.getElementById("content");
requestFullScreen(elem);
};
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
Bootstrap富文本組件wysiwyg數(shù)據保存到mysql的方法
這篇文章主要為大家詳細介紹了Bootstrap富文本組件wysiwyg數(shù)據保存到mysql的方法，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了JavaScript實現(xiàn)打開鏈接頁面的方式，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
文章實現(xiàn)的div拖拽程序可以根據按鈕來控制是要種拖拽方式與位置 ，下面希望有需要的朋友可參考2014-01-01
這篇文章主要介紹了深入理解javascript的getTime()方法,需要的朋友可以參考下2017-02-02
DD_belatedPNG,IE6下PNG透明解決方案(國外)
今天介紹DD_belatedPNG,只需要一個理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.2010-12-12
D3.js是一個基于數(shù)據操作文檔JavaScript庫。D3幫助你給數(shù)據帶來活力通過使用HTML、SVG和CSS。D3重視Web標準為你提供現(xiàn)代瀏覽器的全部功能，而不是給你一個專有的框架。最近在學習D3.js，這個例子是通過d3.js畫一個簡單的柱狀圖。下面來一起看看吧。2016-12-12
JavaScript中的另一個機制：cookie，則可以達到真正全局變量的要求。 cookie是瀏覽器 提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。可以由JavaScript對其進行控制，而并不是JavaScript本身的性質。2008-05-05
這篇文章主要介紹了JS函數(shù)本身的作用域,結合實例形式分析了JS函數(shù)作用域相關原理、操作技巧與使用注意事項,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)同時上傳多張圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
本文為大家介紹下js如何獲取IP和PcName在IE下測試，代碼如下，有需要的朋友可以參考下，希望對大家有所幫助2013-08-08