Maison >interface Web >tutoriel HTML >Affichez l'élément de page intégré iframe sur la page parent et testez-le en plein écran (code joint)
Affichez l'élément de page intégré iframe sur la page parent et testez-le en plein écran (code joint)
- 高洛峰original
- 2017-03-15 11:49:521755parcourir
Les mots
frame et pop-up sont familiers aux maîtres js En tant que nouveau venu, j'ai rencontré une demande si étrange au travail alors que j'étais encore en phase d'apprentissage. fonction plein écran dans la page iframe importée
À première vue, ce n'est pas facile, j'ai simulé les touches de fonction de F11 et ainsi de suite, j'ai donc cherché en ligne. vraiment beaucoup de cas sur le plein écran, alors je les ai empruntés
Ensuite, j'ai joyeusement créé une page de test avec une page sans introduction iframe pour voir l'effet de la fonction plein écran. fullScreenPage. html):
<!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>Eh bien, je pense que cet effet n'est vraiment pas génial, et je l'ai également rendu compatible avec les navigateurs (FireFox=mozRequestFullScreen;W3C=requestFullscreen; Chromeetc.=webkitRequestFullScreen;ie11=msRequestFullscreen)....
Donc, je l'ai immédiatement mis dans le projet À quoi ressemble le résultat Exécutez le code suivant (parentPage.html) Obtenu ? ça....
<!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>Oh, ça ne semble pas fonctionner, alors pourquoi
Évidemment, ça ne marche pas, alors que dois-je faire depuis le sous introduit ? -page iframe ne prend pas effet, est-il possible de partir de la page parent
Ensuite, essayez rapidement de trouver la classe parent et d'exécuter la fonction plein écran, et de changer de page (fullScreenPage.html) . Le code est le suivant :
<!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>Haha, après l'avoir modifié, j'ai trouvé qu'il fonctionnait et le problème est résolu.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!