如何讓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()

寫的不是很好，有不對或改進的地方歡迎指出，謝謝。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。