html中iframe全屏显示,如何让iframe中的元素全屏
最近项目中iframe让人恶心,iframe只要一出现,写的正常代码就容易出现各种bug,比如iframe中的元素不能document.getElementBy...正常获取,比如iframe中的元素不能正常全屏。(前两篇都有谈到)
如何让iframe中的元素全屏显示,在网上也搜了很多资料,没有看到有什么好的方法,所以写写自己的解决方法。
首先有几个坑:
**1. ** 父页面中获取iframe子页面中的元素的方法:
window.frames["iframe的name值"].document.querySelector("css选择器");
在iframe子页面获取父页面中的元素的方法 :
window.parent.document.document.querySelector("css选择器");
这个获取方法需要在服务器环境下运行才有效!
**2. ** HTML5直接提供了让元素全屏显示的方法( https://my.oschina.net/u/3059741/blog/817262 ), 但貌似必须手动触发,比如click。
**3. ** 貌似我们就可以通过上面的两种方法实现:获取iframe中的元素,点击之并让其全屏。但是,但是貌似给iframe中的元素添加点击事件无效。
**4. ** 并且 iframe中元素是不能全屏显示的。
所以说啊,这就是一个连环坑,哈哈。所以我的解决方式是在父页面和iframe的子页面中写两段js。
主要思路是:给iframe的子页面中的元素添加事件,触发事件后克隆元素append到父页面中,这样这个元素才可以全屏显示。
父页面(fullpage.html)的html和js代码:
Document
.div1{
width: 300px;height: 300px;
background: yellow;
margin: 100px auto;
text-align: center;
cursor: pointer;
}
.div2{
width: 300px;height: 300px;
background: pink;
margin: 100px auto;
text-align: center;
cursor: pointer;
}
iframe{
width: 100%;height: 800px;
frameborder: 1;
}
// 开启全屏
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
}else if(element.mozRequestFullScreen) { //兼容moz
element.mozRequestFullScreen();
}else if(element.webkitRequestFullScreen) { //兼容webkit
element.webkitRequestFullScreen();
}
}
//退出全屏
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
}else if(document.mozCancelFullScreen) { //兼容moz
document.mozCancelFullScreen();
}else if(document.webkitExitFullscreen) { //兼容webkit
document.webkitExitFullscreen();
}
}
var div1State = 1;
document.querySelector(".div1").addEventListener("click",function(){
if(div1State){
launchFullScreen(this);
this.title = "点击退出"
div1State = 0;
}else{
exitFullscreen(this);
this.title = "点击全屏预览"
div1State = 1;
}
})
//以上是div1的单独一个全屏例子,跟iframe没有关系。
//退出全屏时删除父页面中的div2
var fullscreenState = 0;
function fullscreenOut(){
if(document.querySelector(".div2")){
document.body.removeChild(document.querySelector(".div2"));
fullscreenState = 0;
}
}
//进入全屏时给div2添加事件(退出全屏的事件)
function fullscreenIn(){
if(document.querySelector(".div2")){
fullscreenState = 1;
document.querySelector(".div2").title="点击退出"
document.querySelector(".div2").addEventListener("click",function(){
exitFullscreen();
})
}
}
//屏幕全屏状态改变事件fullscreenchange的四种兼容,
//并且在回调函数中对应执行函数fullscreenOut和fullscreenIn。
document.addEventListener("fullscreenchange", function(e) {
if(fullscreenState){
fullscreenOut();
}else{
fullscreenIn();
}
});
document.addEventListener("mozfullscreenchange", function(e) {
if(fullscreenState){
fullscreenOut();
}else{
fullscreenIn();
}
});
document.addEventListener("webkitfullscreenchange", function(e) {
if(fullscreenState){
fullscreenOut();
}else{
fullscreenIn();
}
});
document.addEventListener("msfullscreenchange", function(e) {
if(fullscreenState){
fullscreenOut();
}else{
fullscreenIn();
}
});
iframe子页面(iframe.html)的html和js代码:
.div2{
width: 300px;height: 300px;
background: pink;
margin: 100px auto;
text-align: center;
cursor: pointer;
}
function fullScreenSonScript(){
// 开启全屏
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
}else if(element.mozRequestFullScreen) { //兼容moz
element.mozRequestFullScreen();
}else if(element.webkitRequestFullScreen) { //兼容webkit
element.webkitRequestFullScreen();
}
}
//退出全屏
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
}else if(document.mozCancelFullScreen) { //兼容moz
document.mozCancelFullScreen();
}else if(document.webkitExitFullscreen) { //兼容webkit
document.webkitExitFullscreen();
}
}
//点击div2,将其克隆并append到父页面中,再让克隆的div2全屏显示
document.querySelector(".div2").addEventListener("click", function(){
var cloneDiv2=document.querySelector(".div2").cloneNode(true);
window.parent.document.body.appendChild(cloneDiv2);
launchFullScreen(window.parent.document.querySelector(".div2"));
})
}
fullScreenSonScript()
写的不是很好,有不对或改进的地方欢迎指出,谢谢。
html中iframe全屏显示,如何让iframe中的元素全屏相关推荐
- 计算机玩游戏不能全屏,如果电脑游戏无法全屏显示怎么办?电脑游戏解决方案不能全屏显示...
指南: 互联网已逐渐成为我们日常生活中不可或缺的一部分. 它不仅为我们带来了很多便利,还为我们的娱乐生活增添了很多乐趣. 许通过计算机玩一些游戏,并且在使用计算机玩网络游戏的过程中,我们都希望游戏可以 ...
- 副屏幕全屏_电脑屏幕不能全屏显示怎么办 显示器有黑边无法全屏原因及解决方法...
你有没有遇到过显示器不能全屏显示的情况呢?可能有些遇到过的朋友会说了,这太简单了嘛,一般就是分辨率的问题,调下分辨率就好了,其实,不能全屏显示不一定就是分辨率的问题,对于不是分辨率的问题,那么电脑屏幕 ...
- video 满屏显示_微信video标签视频设置全屏属性
微信video标签视频设置全屏属性,支持安卓和ios系统的视频控制器和播放按钮隐藏和视频全屏,微信使用的内核是X5 x-webkit-airplay="true" x5-video ...
- 芒果tv投屏显示无法访问服务器,为什么芒果tv不能投屏?芒果tv不能投屏原因
芒果tv在使用的时候,不少小伙伴们发现不能投屏,想知道怎么回事,不清楚怎么回事的小伙伴们,就让小编给大家详细的讲讲,一起来看看这个怎么回事吧. 为什么芒果tv不能投屏 芒果TV可以投屏到电视. 但是投 ...
- cad中直径符号不显示_CAD导图中常见的4个烦人问题,解决方案都在这里,还不收藏一波?...
问题1:CAD图纸导入后显示过小? 这是因为CAD图纸中还有其他的图元,它可能是一个很小的点或是很短的线条,只有在CAD中全屏查看,才能看见.把它删了就可以让CAD图纸在导入之后正常显示了. 具体做法 ...
- 计算机蓝屏显示的英语代码翻译神器,电脑蓝屏?将英文翻译成中文,就知道该怎么解决了...
碰见电脑蓝屏实在是一件令人烦心的事情,但又不得不去面对.对于使用Windows系统的人来说,遇到电脑蓝屏那是再正常不过的事情.中 小编有电脑十多年了,都记不清到底碰见了几次电脑蓝屏.由于是英语水平低, ...
- 鸿蒙系统息屏显示动画,魅族Flyme 9:支持息屏显示 Alive壁纸
今天下午,魅族带来了Flyme 9发布会.魅族表示,系统作为用户与手机交互的媒介,是用户体验的灵魂.回想起来,每一代Flyme都是经典.Flyme以简洁优雅的设计和创新实用的功能为用户创造极致体验. ...
- win7接收android无线显示,如何让win7系统笔记本和电视无线同屏显示|win7系统笔记本和电视无线同屏显示的设置方法...
生活空闲的时候,大家习惯使用win7系统笔记本搜索电影.电视剧来看,充实一下空闲时间.但是有用户觉得在笔记本上看电视剧,没办法像电视一样大,屏幕太小了.电视拥有屏幕,但是电脑内容有局限性.其实大家可以 ...
- html 多屏 显示不出来,如何进行双屏或多屏显示设置
操作步骤: 一.常见显示输出接口介绍 1.台式机集成显卡显示输出接口和独立显卡显示输出接口位置,如下图所示:(此视图为立式电脑主机箱背部) 注意:出厂标配独立显卡的电脑,请务必将显示器连接到独立显卡的 ...
最新文章
- loadrunner场景中按scenario和group执行的区别
- Java平滑处理什么意思_为何要进行数据平滑处理?
- 使用shell脚本对Linux系统和进程资源进行监控
- 超赞!这些 “电子” 艺术品,真绝了!
- react vs 2017_我在React Europe 2017上学到了什么
- python爬取网易云歌单_详解python selenium 爬取网易云音乐歌单名
- MySQL 深潜 - 一文详解 MySQL Data Dictionary
- Swift中文教程(十) 属性
- (28)css3 3D转换
- 即时通讯学习笔记006---认识学习OpenFire服务器用的加密算法Blowfish_以及用java实现Blowfish算法
- 【体系结构】Oracle的kernel.shmmax和kernel.shmall设置
- Power oj2498/DP/递推
- 谷粒商城:Oss endpoint can‘t be empty.
- Edraw Office Viewer Component
- 第二人生的源码分析(八十)界面语言的选择
- 细说六度分隔与相关数学模型
- 从零实现一个简单卷积神经网络
- untiy virtual reality supported勾选
- 开源许可违反:案例说明(Apache License 2.0)
- speedoffice中Word如何拆分单元格