首页 > 解决方案 > 在自动点击按钮上全屏

问题描述

我必须在页面加载时通过自动单击网页上的按钮使浏览器进入全屏状态。

我有这个全屏代码:

/* Get the element you want displayed in fullscreen */ 
var elem = document.documentElement;
/* Function to open fullscreen mode */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

/* Function to close fullscreen mode */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

// Events
var output = document.getElementById("myButton");
document.addEventListener("fullscreenchange", function() {
  output.innerHTML = "fullscreenchange event fired!";
});
document.addEventListener("mozfullscreenchange", function() {
  output.innerHTML = "mozfullscreenchange event fired!";
});
document.addEventListener("webkitfullscreenchange", function() {
  output.innerHTML = "webkitfullscreenchange event fired!";
});
document.addEventListener("msfullscreenchange", function() {
  output.innerHTML = "msfullscreenchange event fired!";
});
	<button id="myButton" onclick="openFullscreen()">Go Fullscreen</button>

标签: javascriptjquery

解决方案


您可以使用名为 jQuery Fullscreen 的插件,它允许您以全屏模式打开页面上的任何元素,而无需在所有现代浏览器(Firefox、Chrome、Safari、Opera)中使用 Flash。如果浏览器不支持此功能,则元素将被拉伸以填充屏幕而不切换到全屏。

在这里下载插件

这个插件的演示在这里


推荐阅读