1.火狐报错:请求全屏已拒绝,至少一个文档包含的元素不是一个 iframe,或没有"allowfullscreen"属性。
2.TypeError: The expression cannot be converted to return the specified type.)
-
3.解决 (如果无法解决则选择第4)
解决:在iframe标签中添加 allowfullscreen="true"
<iframe allowfullscreen="true" src="#" width="100%" height="100%"> </iframe>
-
4.自定义添加全屏点击事件
导入js[screenfull.min.js],源码如下
/*! * screenfull * v3.0.0 - 2015-11-24 * (c) Sindre Sorhus; MIT License */ ! function() { "use strict"; var a = "undefined" != typeof module && module.exports, b = "undefined" != typeof Element && "ALLOW_KEYBOARD_INPUT" in Element, c = function() { for(var a, b, c = [ ["requestFullscreen", "exitFullscreen", "fullscreenElement", "fullscreenEnabled", "fullscreenchange", "fullscreenerror"], ["webkitRequestFullscreen", "webkitExitFullscreen", "webkitFullscreenElement", "webkitFullscreenEnabled", "webkitfullscreenchange", "webkitfullscreenerror"], ["webkitRequestFullScreen", "webkitCancelFullScreen", "webkitCurrentFullScreenElement", "webkitCancelFullScreen", "webkitfullscreenchange", "webkitfullscreenerror"], ["mozRequestFullScreen", "mozCancelFullScreen", "mozFullScreenElement", "mozFullScreenEnabled", "mozfullscreenchange", "mozfullscreenerror"], ["msRequestFullscreen", "msExitFullscreen", "msFullscreenElement", "msFullscreenEnabled", "MSFullscreenChange", "MSFullscreenError"] ], d = 0, e = c.length, f = {}; e > d; d++) if(a = c[d], a && a[1] in document) { for(d = 0, b = a.length; b > d; d++) f[c[0][d]] = a[d]; return f } return !1 }(), d = { request: function(a) { var d = c.requestFullscreen; a = a || document.documentElement, /5\.1[\.\d]* Safari/.test(navigator.userAgent) ? a[d]() : a[d](b && Element.ALLOW_KEYBOARD_INPUT) }, exit: function() { document[c.exitFullscreen]() }, toggle: function(a) { this.isFullscreen ? this.exit() : this.request(a) }, raw: c }; return c ? (Object.defineProperties(d, { isFullscreen: { get: function() { return Boolean(document[c.fullscreenElement]) } }, element: { enumerable: !0, get: function() { return document[c.fullscreenElement] } }, enabled: { enumerable: !0, get: function() { return Boolean(document[c.fullscreenEnabled]) } } }), void(a ? module.exports = d : window.screenfull = d)) : void(a ? module.exports = !1 : window.screenfull = !1) }(); //监听调用方法 ;参数domId为需要全屏的div的id function fullScreen(domId){ var element=document.getElementById(domId); var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if(requestMethod) { requestMethod.call(element); } else if(typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if(wscript !== null) { wscript.SendKeys("{Esc}"); } } }
-
5.例子
<script src="screenfull.min.js"></script> <div onclick="fullScreen("fullscreenId")">点击全屏</div> <div> <iframe allowfullscreen="true" src="全屏的html链接" width="100%" height="100%"> </iframe> </div>