Affichez l'élément de page intégré iframe sur la page parent et testez-le en plein écran (code joint)-tutoriel HTML-php.cn

Affichez l'élément de page intégré iframe sur la page parent et testez-le en plein écran (code joint)

高洛峰

Libérer： 2017-03-15 11:49:52

original

1774 Les gens l'ont consulté

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")[&#39;0&#39;]);
    $("#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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!