<!DOCTYPE html>
<html>
<head>
<title>My sencond Three.js app</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.wholeCl{
display: none;
}
</style>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.bootcss.com/screenfull.js/5.0.0/screenfull.js"></script>
</head>
<body leftmargin= 0 topmargin =0 bottommargin = 0 style="width: 100%;height: 100%">
<button id="btn_full_scr">全屏測試按鈕</button>
<script>// <![CDATA[
jQuery(function() {
jQuery('#btn_full_scr').click(function() {
if (!screenfull.enabled) {
// alert('你的瀏覽器不支持全屏');
}
// screenfull.request();//當前頁面全屏
// does not require jQuery, can be used like this too:
$('.wholeCl').css({"display": "block"});
screenfull.request(document.getElementById('ifr1'));//某一個頁面全屏
});
});
function exitFullscreen(){
}
window.onresize = function() {
if (!checkFull()) {
//要執行的動作
$('.wholeCl').css({"display": "none"});
}
}
function checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
//to fix : false || undefined == undefined
if (isFull === undefined) {isFull = false;}
return isFull;
}
</script>
<div class="wholeCl">
<iframe src ="https://blog.csdn.net/myfmyfmyfmyf" id="ifr1" name="ifr1" width="100%" height="100%"></iframe>
</div>
</body>
</html>
js點擊彈開頁面自動全屏
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.