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;

}

父页面中的div1

// 开启全屏

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;

}

iframe中的div2

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()

写的不是很好，有不对或改进的地方欢迎指出，谢谢。