在 iOS [Safari] 中使用 Javascript 的全屏 iFrame
FullScreen iFrame using Javascript in iOS [Safari]
我设置全屏功能:
function setUpFullScreen() {
document.cancelFullScreen = document.webkitCancelFullScreen || document.mozCancelFullScreen || document.cancelFullScreen;
document.body.requestFullScreen = document.body.webkitRequestFullScreen || document.body.mozRequestFullScreen || document.body.requestFullScreen;
document.onfullscreenchange = document.onfullscreenchange || document.onwebkitfullscreenchange || document.onmozfullscreenchange;
if (document.addEventListener) {
document.addEventListener('webkitfullscreenchange', fullscreenChangeHandler, false);
document.addEventListener('mozfullscreenchange', fullscreenChangeHandler, false);
document.addEventListener('fullscreenchange', fullscreenChangeHandler, false);
document.addEventListener('MSFullscreenChange', fullscreenChangeHandler, false);
}
}
并使用以下方式切换全屏:
function toggleFullScreen() {
if (isFullScreen()) {
trace("Exiting fullscreen.");
document.querySelector("svg#fullscreen title").textContent = "Enter fullscreen";
document.cancelFullScreen();
} else {
trace("Entering fullscreen.");
document.querySelector("svg#fullscreen title").textContent = "Exit fullscreen";
document.body.requestFullScreen();
}
}
检查是否全屏:
function isFullScreen() {
return !!(document.webkitIsFullScreen || document.mozFullScreen || document.isFullScreen);
}
切换全屏适用于 Chrome、Safari、Firefox(桌面版)以及 Chrome Android。但是,不适用于 Safari 和 Chrome。我在 Safari 上看到以下错误:
TypeError: document.body.requestFullScreen is not a function. (In 'document.body.requestFullScreen()', 'document.body.requestFullScreen' is undefined)
如何使用 javascript 在 iOS 上实现全屏功能?
仅供参考:我的代码改编自 https://appr.tc/
https://github.com/webrtc/apprtc/blob/master/src/web_app/js/appcontroller.js
使用:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
在 HTML 文件中对我有用。
我设置全屏功能:
function setUpFullScreen() {
document.cancelFullScreen = document.webkitCancelFullScreen || document.mozCancelFullScreen || document.cancelFullScreen;
document.body.requestFullScreen = document.body.webkitRequestFullScreen || document.body.mozRequestFullScreen || document.body.requestFullScreen;
document.onfullscreenchange = document.onfullscreenchange || document.onwebkitfullscreenchange || document.onmozfullscreenchange;
if (document.addEventListener) {
document.addEventListener('webkitfullscreenchange', fullscreenChangeHandler, false);
document.addEventListener('mozfullscreenchange', fullscreenChangeHandler, false);
document.addEventListener('fullscreenchange', fullscreenChangeHandler, false);
document.addEventListener('MSFullscreenChange', fullscreenChangeHandler, false);
}
}
并使用以下方式切换全屏:
function toggleFullScreen() {
if (isFullScreen()) {
trace("Exiting fullscreen.");
document.querySelector("svg#fullscreen title").textContent = "Enter fullscreen";
document.cancelFullScreen();
} else {
trace("Entering fullscreen.");
document.querySelector("svg#fullscreen title").textContent = "Exit fullscreen";
document.body.requestFullScreen();
}
}
检查是否全屏:
function isFullScreen() {
return !!(document.webkitIsFullScreen || document.mozFullScreen || document.isFullScreen);
}
切换全屏适用于 Chrome、Safari、Firefox(桌面版)以及 Chrome Android。但是,不适用于 Safari 和 Chrome。我在 Safari 上看到以下错误:
TypeError: document.body.requestFullScreen is not a function. (In 'document.body.requestFullScreen()', 'document.body.requestFullScreen' is undefined)
如何使用 javascript 在 iOS 上实现全屏功能?
仅供参考:我的代码改编自 https://appr.tc/ https://github.com/webrtc/apprtc/blob/master/src/web_app/js/appcontroller.js
使用:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
在 HTML 文件中对我有用。