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

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)

高洛峰

Mar 15, 2017 am 11:49 AM

iframe

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>

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!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Quel est le but des balises HTML?Apr 28, 2025 am 12:02 AM

Htmltagsaressentialforstructuringwebpages, amélioration accessibilité, référence

Que sont les balises d'auto-fermeture? Donner un exemple.Apr 27, 2025 am 12:04 AM

Self-Flaytagsinhtmlandxmlaretagsthatrechy-sey-sey -thout neweding aparateclosingtag, simplifier laMarkupTructureAnhancingCodingEfficiency.1) TheyAssentialInxmlForeLementswithoutContent, assurantwell-formedDocuments.

Au-delà de HTML: technologies essentielles pour le développement WebApr 26, 2025 am 12:04 AM

Pour créer un site Web avec des fonctions puissantes et une bonne expérience utilisateur, HTML seul ne suffit pas. La technologie suivante est également requise: JavaScript donne la dynamique et l'interactivité de la page Web, et les modifications en temps réel sont réalisées par DOM opération. CSS est responsable du style et de la disposition de la page Web pour améliorer l'esthétique et l'expérience utilisateur. Des cadres et des bibliothèques modernes tels que React, Vue.js et Angular améliorent l'efficacité du développement et la structure de l'organisation du code.

Quels sont les attributs booléens en HTML? Donnez quelques exemples.Apr 25, 2025 am 12:01 AM

Les attributs booléens sont des attributs spéciaux en HTML qui sont activés sans valeur. 1. L'attribut booléen contrôle le comportement de l'élément par le fait qu'il existe ou non, comme les désactivés désactiver la boîte d'entrée. 2. Le principe de travail consiste à changer le comportement des éléments en fonction de l'existence d'attributs lorsque le navigateur analyse. 3. L'utilisation de base consiste à ajouter directement des attributs, et l'utilisation avancée peut être contrôlée dynamiquement via JavaScript. 4. Les erreurs courantes pensent à tort que les valeurs doivent être définies, et la bonne méthode d'écriture devrait être concise. 5. La meilleure pratique consiste à garder le code concis et à utiliser raisonnablement les propriétés booléennes pour optimiser les performances de la page Web et l'expérience utilisateur.

Comment pouvez-vous valider votre code HTML?Apr 24, 2025 am 12:04 AM

Le code HTML peut être plus propre avec des validateurs en ligne, des outils intégrés et des processus automatisés. 1) Utilisez W3CMarkUpValidations Service pour vérifier le code HTML en ligne. 2) Installez et configurez l'extension htmlhint dans VisualStudiocode pour une vérification en temps réel. 3) Utilisez HTMLTIDY pour vérifier et nettoyer automatiquement les fichiers HTML dans le processus de construction.

HTML vs CSS et JavaScript: Comparaison des technologies WebApr 23, 2025 am 12:05 AM

HTML, CSS et JavaScript sont les technologies de base pour la création de pages Web modernes: 1. HTML définit la structure de la page Web, 2. CSS est responsable de l'apparence de la page Web, 3. JavaScript fournit une dynamique de page Web et une interactivité, et ils travaillent ensemble pour créer un site Web avec une bonne expérience d'utilisation.

HTML comme un langage de balisage: sa fonction et son objectifApr 22, 2025 am 12:02 AM

La fonction de HTML est de définir la structure et le contenu d'une page Web, et son objectif est de fournir un moyen standardisé d'afficher des informations. 1) HTML organise différentes parties de la page Web via des balises et des attributs, tels que des titres et des paragraphes. 2) Il soutient la séparation du contenu et des performances et améliore l'efficacité de maintenance. 3) Le HTML est extensible, permettant aux balises personnalisées d'améliorer le référencement.

L'avenir de HTML, CSS et JavaScript: Tendances de développement WebApr 19, 2025 am 12:02 AM

Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

1 Il y a quelques moisByDDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

3 Il y a quelques semainesByDDD

Où trouver la courte de la grue à atomide atomique

1 Il y a quelques moisByDDD

Comment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?

2 Il y a quelques semainesByDDD

Inzoi: Comment postuler à l'école et à l'université

3 Il y a quelques semainesByDDD

Afficher plus

Outils chauds

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

DVWA

Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel