screenflow使用方法（全屏插件screenfull.js）
screenflow使用方法（全屏插件screenfull.js）.request() Make an element fullscreen. Accepts a DOM element. Default is <html>. If called with another element than the currently active it will switch to that if it's a decendant. If your page is inside an <iframe> you will need to add a allowfullscreen attribute ( webkitallowfullscreen and mozallowfullscreen). Keep in mind that the browser will only enter fullscreen when initiated
源码地址：https://github.com/Hubww/screenfull.js
页面代码
<section> <p>Try out the Fullscreen API</p> <button id="request">Request</button> <button id="exit">Exit</button> <button id="toggle">Toggle</button> <button id="request2">Request document</button> </section> <section> <ul> <li id="supported"></li> <li id="status"></li> <li id="element"></li> </ul> </section> <input autofocus placeholder="Keyboard test"> <hr> <section> <p>Click the image to make it fullscreen</p> <img id="demo-img" src="https://img.aigexing.comhttps://sindresorhus.com/unicorn" width="500"> </section> </section>
js代码
$(function () { $('#supported').text('Supported/allowed: ' !!screenfull.isEnabled); //判断是否支持插件 if (!screenfull.isEnabled) { return false; } //手动全屏 $('#request').click(function () { screenfull.request($('#container')[0]).then(function () { console.log('Browser entered fullscreen mode') }) // Does not require jQuery. Can be used like this too: // screenfull.request(document.getElementById('container')); }); //退出全屏 $('#exit').click(function () { screenfull.exit().then(function () { console.log('Browser exited fullscreen mode') }); }); //切换全屏 $('#toggle').click(function () { screenfull.toggle($('#container')[0]).then(function () { console.log('Fullscreen mode: ' (screenfull.isFullscreen ? 'enabled' : 'disabled')) }); }); //全屏整个页面 $('#request2').click(function () { screenfull.request(); }); //点击图片全屏 $('#demo-img').click(function () { screenfull.toggle(this); }); function fullscreenchange() { var elem = screenfull.element; $('#status').text('Is fullscreen: ' screenfull.isFullscreen); if (elem) { $('#element').text('Element: ' elem.localName (elem.id ? '#' elem.id : '')); } if (!screenfull.isFullscreen) { $('#external-iframe').remove(); document.body.style.overflow = 'auto'; } } screenfull.on('change' fullscreenchange); // Set the initial values fullscreenchange(); });
API
.request() Make an element fullscreen. Accepts a DOM element. Default is <html>. If called with another element than the currently active it will switch to that if it's a decendant. If your page is inside an <iframe> you will need to add a allowfullscreen attribute ( webkitallowfullscreen and mozallowfullscreen). Keep in mind that the browser will only enter fullscreen when initiated by user events like click touch key. Returns a promise that resolves after the element enters fullscreen. .exit() Brings you out of fullscreen. Returns a promise that resolves after the element exits fullscreen. .toggle() Requests fullscreen if not active otherwise exits. Returns a promise that resolves after the element enters/exits fullscreen. .on(event function) Events: 'change' | 'error' Add a listener for when the browser switches in and out of fullscreen or when there is an error. .off(event function) Remove a previously registered event listener. .onchange(function) Alias for .on('change' function) .onerror(function) Alias for .on('error' function) .isFullscreen Returns a boolean whether fullscreen is active. .element Returns the element currently in fullscreen otherwise null. .isEnabled Returns a boolean whether you are allowed to enter fullscreen. If your page is inside an <iframe> you will need to add a allowfullscreen attribute ( webkitallowfullscreen and mozallowfullscreen). .raw Exposes the raw properties (prefixed if needed) used internally: requestFullscreen exitFullscreen fullscreenElement fullscreenEnabled fullscreenchange fullscreenerror
创建一个无缝的iframe来填充屏幕，然后转到其中的页面。
$('#new-page-btn').click(() => { const iframe = document.createElement('iframe') iframe.setAttribute('id' 'external-iframe'); iframe.setAttribute('src' 'http://new-page-website.com'); iframe.setAttribute('frameborder' 'no'); iframe.style.position = 'absolute'; iframe.style.top = '0'; iframe.style.right = '0'; iframe.style.bottom = '0'; iframe.style.left = '0'; iframe.style.width = '100%'; iframe.style.height = '100%'; $(document.body).prepend(iframe); document.body.style.overflow = 'hidden'; });
