vue プロジェクトで、ページの全画面表示を制御できるエフェクトを作成します。全画面効果を実現するには、ページの左上隅にある [フルスクリーン] ボタンをクリックします。ここのボタンは目立たないため、できません。見えません。
レンダリング図
通常のページ:
コードの実装:
全画面を実現するには、主に requestFullScreen() メソッドを使用して要素を全画面モードで開きます。
この方法をさまざまなブラウザで機能させるには、特定のプレフィックスが必要です。全画面モードをキャンセルするには、document.exitFullscreen() メソッドを使用します。
使用上の注意
1. requestFullscreen メソッドはユーザーのみが起動できます。
2. ページジャンプは最初に全画面を終了する必要があります
3. 全画面に入る要素は親要素から分離されるため、一部の CSS が失敗する可能性があります
互換性のために、-webkit、- を追加してくださいmoz または -ms プレフィックス)
ネイティブ メソッドを使用して CSS を変更しています。
4. 要素 A が全画面になった後、その子要素は再び全画面になる必要があり、要素 A が最初に全画面を終了する必要があります。
onMounted(() => {
// 给页面的按钮绑定事件,点击可以触发全屏
setTimeout(() => {
document.getElementById('signinBbtn').onclick = function (params) {
requestFullScreen(document.documentElement);
let doc = document.getElementsByClassName('sginInContainer')[0]
doc.style.position = 'fixed'
doc.style.left = 0
doc.style.top = 0
doc.style.width = '100vw'
}
}, 1000)
// 使用window.onresize 监听页面进入全屏和退出全屏操作,并作处理
window.onresize = function () {
let doc = document.getElementsByClassName('sginInContainer')[0]
if (!doc) {
return }
if (document.fullscreenElement) {
console.log('进入全屏')
} else {
// 退出全屏的时候恢复原来的样式
console.log('退出全屏')
doc.style.position = 'relative'
doc.style.left = 'inherit'
doc.style.top = 'inherit'
doc.style.width = 'inherit'
}
};
})
// 实现全屏的方法
const requestFullScreen = (element) => {
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome
element.mozRequestFullScreen || //FireFox
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏 这里没有用到 ,esc键和F11可以直接退出,
function exitFull() {
// 判断各种浏览器,找到正确的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //FireFox
document.webkitExitFullscreen || //Chrome等
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") {
//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}