Heim > Artikel > Web-Frontend > Öffnen Sie das eingebettete iframe-Seitenelement auf der übergeordneten Seite und testen Sie es im Vollbildmodus (Code angehängt).
Öffnen Sie das eingebettete iframe-Seitenelement auf der übergeordneten Seite und testen Sie es im Vollbildmodus (Code angehängt).
- 高洛峰Original
- 2017-03-15 11:49:521734Durchsuche
Die Wörter
Rahmen und Popup-Fenster sind js-Experten bekannt. Als ich noch in der Lernphase war, stieß ich auf eine so seltsame Anforderung Vollbildfunktion in der importierten iframe-Seite. Auf den ersten Blick ist es nicht einfach, die Funktionstasten von F11 usw. zu simulieren Es gibt wirklich viele Fälle zum Thema Vollbild, also habe ich sie ausgeliehen
Dann habe ich gerne eine Testseite mit einer Seite ohne Iframe-Einführung erstellt, um die Wirkung der Vollbildfunktion zu sehen. fullScreenPage. html):
Nun, ich finde diesen Effekt wirklich nicht toll, und ich habe ihn auch browserkompatibel gemacht (FireFox=mozRequestFullScreen;<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Control Tower</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="margin: 0px;height: 100%;width: 100%;">
<div id="buttonPanel" style="position: absolute;left: 25%;z-index:100">
<input id="full_screen_open" type="button" value="打开全屏">
<input id="full_screen_close" type="button" value="退出全屏" style="display: none">
</div>
<div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;">
<div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;">
<font id="font" size="30"></font>
</div>
</div>
</body>
<script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$("#full_screen_open").on("click",function(){
requestFullScreen($("#container")['0']);
$("#font").empty();
$("#font").text("已打开全屏化");
});
var requestFullScreen = function(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}");
}
}
}
</script>
</html>W3C=requestFullscreen; Chromeetc.=webkitRequestFullScreen;ie11=msRequestFullscreen)....Also, ich habe es sofort in das Projekt eingefügt, wie sieht das Ergebnis aus? Führen Sie den folgenden Code aus (parentPage.html) Erhalten es....
Oh, es scheint nicht zu funktionieren, also warum?<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Control Tower</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="margin: 0px;height: 100%;width: 100%;">
<div id="parentContainer" style="height: 75%;width: 75%;position:absolute;left: 12.5%;border: 2px solid red;">
<!-- 蓝色边框以内的内容是引入的iframe页面内容,也是需要做全屏化功能的页面 -->
<iframe src="fullScreenPage.html" style="border: 2px solid blue;height: 100%;width: 100%;"></iframe>
</div>
</body>
</html>Offensichtlich funktioniert es nicht, also was soll ich seit dem eingeführten Sub tun? -page iframe funktioniert nicht. Ist es möglich, von der übergeordneten Seite aus zu beginnen?
Versuchen Sie dann schnell, die übergeordnete Klasse zu finden, die Vollbildfunktion auszuführen und die Seite zu ändern (fullScreenPage.html). . Der Code lautet wie folgt:
Haha, nachdem ich ihn geändert habe, habe ich festgestellt, dass er funktioniert und das Problem gelöst ist.<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Control Tower</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="margin: 0px;height: 100%;width: 100%;">
<div id="buttonPanel" style="position: absolute;left: 25%;z-index:100">
<input id="full_screen_open" type="button" value="打开全屏">
<input id="full_screen_close" type="button" value="退出全屏" style="display: none">
</div>
<div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;">
<div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;">
<font id="font" size="30"></font>
</div>
</div>
</body>
<script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$("#full_screen_open").on("click",function(){
/* 获取父类的document */
var parentDoc = parent.document;
/* 定义一个接收元素的变量 */
var thisIframe = null;
/* 用jQuery遍历父类的所有iframe,找到我引入的那个iframe,
假设我不知道是哪个页面要引入我的iframe,但是引入我的iframe的src肯定会有引入这个页面的名字,
所以通过这个去检索,一定能找到引入这个页面的iframe,然后把这个iframe的元素全屏化也就是把原来的页面全屏化 */
$("iframe",window.parent.document).each(function(index,e){
if (e.src.indexOf("fullScreenPage.html") > 0) {
thisIframe = e;
return false;
}
});
requestFullScreen(thisIframe);
$("#font").empty();
$("#font").text("已打开全屏化");
});
var requestFullScreen = function(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}");
}
}
}
</script>
</html>Das obige ist der detaillierte Inhalt vonÖffnen Sie das eingebettete iframe-Seitenelement auf der übergeordneten Seite und testen Sie es im Vollbildmodus (Code angehängt).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!