如何让iframe中的元素全屏

时间 2019-12-09

标签如何 iframe 元素全屏栏目 HTML 繁體版

原文原文链接

最近项目中iframe让人恶心，iframe只要一出现，写的正常代码就容易出现各类bug，好比iframe中的元素不能document.getElementBy...正常获取，好比iframe中的元素不能正常全屏。（前两篇都有谈到）css

如何让iframe中的元素全屏显示，在网上也搜了不少资料，没有看到有什么好的方法，因此写写本身的解决方法。html

首先有几个坑：web

**1. ** 父页面中获取iframe子页面中的元素的方法：服务器

window.frames["iframe的name值"].document.querySelector("css选择器")；

在iframe子页面获取父页面中的元素的方法 :

window.parent.document.document.querySelector("css选择器")；

这个获取方法须要在服务器环境下运行才有效！

**2. ** HTML5直接提供了让元素全屏显示的方法（ http://www.javashuo.com/article/p-ymivthvi-et.html ），但貌似必须手动触发，好比click。app

**3. ** 貌似咱们就能够经过上面的两种方法实现：获取iframe中的元素，点击之并让其全屏。可是，可是貌似给iframe中的元素添加点击事件无效。函数

**4. ** 而且 iframe中元素是不能全屏显示的。this

因此说啊，这就是一个连环坑，哈哈。因此个人解决方式是在父页面和iframe的子页面中写两段js。.net

主要思路是：给iframe的子页面中的元素添加事件，触发事件后克隆元素append到父页面中，这样这个元素才能够全屏显示。code

父页面（fullpage.html）的html和js代码：htm

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>

	.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;
	}
</style>
<body>
	<div class="div1" title="点击全屏浏览">父页面中的div1</div>
	<iframe src="iframe.html" name="iframeName"></iframe>
</body>
</html>

// 开启全屏
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代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
	    .div2{
			width: 300px;height: 300px;
			background: pink;
			margin: 100px auto;
            text-align: center;
            cursor: pointer;
		}
       
    </style>
    <body>
 
        <div  class="div2" title="点击我全屏预览">iframe中的div2</div>
        
    </body>
</html>

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

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