需求

点击全屏按钮，让页面iframe全屏展示
点击退出全屏按钮，让页面iframe退出全屏

代码实现

HTML代码实现

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.content-parent {width: 800px;height: 600px;margin: 0 auto;background-color: aquamarine;}.content-parent h1 {text-align: center;}/*设置全屏样式*/#iframe-one:-webkit-full-screen {width: 100%;height: 100%;}</style>
</head>
<body>
<div class="content-parent"><button id="goAmpl">子页面全屏化</button><button id="outAmpl"></button><iframe id="iframe-one" name="iframe-one" src="https://www.baidu.com" width="100%" height="200" scrolling="no"frameborder="0"></iframe></div>
</body>
</html>

JavaScript 代码实现

   /*** 进入全屏* @param element*/function requestFullScreen(element) {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("{F11}");}}}/*** 退出全屏*/function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}}document.getElementById('goAmpl').onclick = function () {let iframe = document.getElementById("iframe-one");requestFullScreen(iframe);}document.getElementById('outAmpl').onclick = function () {let iframe = document.getElementById("iframe-one");exitFullscreen(iframe);}

注意

如果div不设置background style则使用webkitRequestFullScreen全屏时，div会被黑色填充
WebKit 不会自动添加全屏样式，需要手动实现

  #iframe-one:-webkit-full-screen {width: 100%;height: 100%;}

简单实现 iframe 全屏显示相关推荐

html中iframe全屏显示,如何让iframe中的元素全屏
最近项目中iframe让人恶心,iframe只要一出现,写的正常代码就容易出现各种bug,比如iframe中的元素不能document.getElementBy...正常获取,比如iframe中的元素 ...
Android PupopWindow适配全面屏全屏显示覆盖状态栏简单实用只需两步
开发中有一个需求弹出一个弹窗广告,背景需要半透明全屏显示,覆盖状态栏(见下图).我选用了PupopWindow实现. 然后设置了属性宽高为WindowManager.LayoutParams.MATC ...
iframe嵌套网页全屏显示，已实现有代码
两种方式:直接复制使用修改地址即可使用没有上面的<!DOCTYPE html> <html><head><meta http-equiv="Con ...
html 设置浏览器全屏显示,JavaScript控制浏览器全屏显示简单示例
本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: www.jb51.net JS全屏显示全屏显示退出全屏 // 判断各种浏览器,找到正确的方法 functio ...
将网页全屏显示的三种方法
1.最简单,最直接的方法,使用window.open()函数 var url = "http://www.baidu.com" ; window.open(url,'_blank' ...
Fullscreen API 全屏显示网页
Fullscreen API 全屏显示网页第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrom ...
Android 全屏显示
全屏显示主要是设置下面这两个属性: this.requestWindowFeature(Window.FEATURE_NO_TITLE); this.getWindow().setFlags(Wind ...
QT中关于窗口全屏显示与退出全屏的实现
近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一些关于这方面的答案,希望能给大家一些帮助. 首先,在QT中对于窗口显示常用的有这么几个方法可以调用: Qt全屏显示 ...
的run窗口不显示_「玩转deepin」如何安装VirtualBox增强功能使得deepin全屏显示？...
在Windows上通过Virtualbox安装deepin深度操作系统,安装完成后,为了让deepin可以在virtualbox中全屏显示,需要安装增强工具,但是不少同学点击安装增强工具后会出现无法安 ...

简单实现 iframe 全屏显示

需求

代码实现

注意

简单实现 iframe 全屏显示相关推荐

最新文章

热门文章