我有这个链接。
我希望如果我的屏幕尺寸小于 500，allowfullscreen 会被触发为 true。我怎样才能实现这个目标？我不希望通过 CSS 来完成。
最佳答案
您可以使用matchMedia()，而不是依赖CSS媒体查询。管理您的应用程序处理视口(viewport)大小的方式。全屏 API 需要用户交互，因此此过程需要一点 CSS。
- 详细信息已在代码段中注释。
- 由于沙盒限制，代码段将无法正常运行。所以一个PLUNKER也可供审核。
- 查看 Plunker 时，点击蓝色按钮，在新窗口中打开预览。
- 将新窗口宽度调整为 500 像素或更小。
- 视口(viewport)应变暗，以提示用户存在叠加层。
- 点击叠加层后，它将全屏显示。
片段
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fs</title>
<style>
/* Although CSS is excluded by request from OP, this is
| an exception and in this circumstance necessary. User
| must interact for Full Screen API to work. In abscence
| of a pure programmitic solution, one must rely on CSS
| and/or HTML.
*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .3);
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<!--Add this div to HTML-->
<div class='overlay'></div>
<iframe id="fullscreen" src="http://www.example.com" width='100%' height='500' allowfullscreen></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/*
| Create a mediaQueryList (mql) with a query that matches
| a viewport of 500px or less.
| Pass it into the function mqr()
| Add a listener to mql and assign mqr() as event handler.
| Reference target as a jQuery object (iframe).
*/
var $obj = $('iframe');
var mql = window.matchMedia("screen and (max-device-width: 500px)");
mqr(mql);
mql.addListener(mqr);
/*
| Reference .overlay as jQuery object
| (overlay is display: none initially)
| Reference #fullscreen as a plain object.
| Use the .matches property to compare mql to viewport
| If the viewport is < 500px then...
| ...show() overlay then...
| ...pass overlay and fs to the fs() function
*/
function mqr(mql) {
var overlay = $('.overlay');
if (mql.matches) {
overlay.show();
fs(overlay, $obj);
}
}
// isFullScreen() function will verify if full screen is active
var isFullScreen = function() {
return !!(document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
}
/*
| fs() function will delegate click event on a given
| element (first parameter).
| When triggered, it will target the element (second
| parameter) and dereference it in order to use the
| Full Screen API.
| The isFullScreen function determines if full
| screen is already active...
| if not active requestFullscreen method is called...
| ...if it is, then exitFullscreen method is called.
*/
function fs(overlay, $obj) {
overlay.on('click', function() {
var fs = $obj[0];
if (!isFullScreen()) {
if (fs.requestFullscreen) {
fs.requestFullscreen();
} else if (fs.mozRequestFullScreen) {
fs.mozRequestFullScreen();
} else if (fs.webkitRequestFullscreen) {
fs.webkitRequestFullscreen();
} else if (fs.msRequestFullscreen) {
fs.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
});
}
</script>
</body>
</html>关于javascript - 如果屏幕尺寸很小，我可以全屏打开 iframe 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39999677/