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)
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!
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
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment recadrer un IFrame en HTML ?
Aug 29, 2023 pm 04:33 PM
Les frames en ligne sont appelés iframes en HTML. Une étiquette spécifie une zone rectangulaire dans le contenu où le navigateur peut afficher différents documents avec des barres de défilement et des bordures. Pour intégrer un autre document dans le document HTML actuel, utilisez des cadres en ligne. Une référence à un élément peut être spécifiée à l'aide de l'attribut de nom HTMLiframe. En JavaScript, les références aux éléments sont également faites à l'aide de l'attribut name. Une iframe est essentiellement utilisée pour afficher une page Web dans la page Web actuellement affichée. L'URL du document contenant l'iframe est spécifiée à l'aide de l'attribut "src". Syntaxe Voici la syntaxe du HTML <iframesrc="URL"title="d
Que signifie l'identifiant de données dans iframe ?
Aug 28, 2023 pm 02:25 PM
Le data-id dans une iframe fait référence à un attribut personnalisé utilisé dans les balises HTML pour stocker l'identifiant d'un élément spécifique. En utilisant l'attribut data-id, vous pouvez ajouter un identifiant unique à l'élément iframe afin qu'il puisse être manipulé et accessible en JavaScript. La dénomination de l'attribut data-id peut être personnalisée en fonction de besoins spécifiques, mais certaines conventions de dénomination sont généralement suivies pour garantir son unicité et sa lisibilité. L'attribut data-id peut également être utilisé pour identifier et manipuler une iframe spécifique.
Pourquoi l'iframe se charge-t-elle lentement ?
Aug 24, 2023 pm 05:51 PM
Les raisons du chargement lent des iframes incluent principalement le retard du réseau, le long temps de chargement des ressources, l'ordre de chargement, le mécanisme de mise en cache et la politique de sécurité. Introduction détaillée : 1. Délai du réseau Lorsque le navigateur charge une page Web contenant une iframe, il doit envoyer une requête au serveur pour obtenir le contenu de l'iframe. Si le délai du réseau est élevé, le délai d'obtention du contenu sera élevé. augmenter, entraînant un chargement lent de l'iframe. ; 2. Lorsque le temps de chargement de la ressource est long, la taille de la ressource est grande ou le temps de réponse du serveur est long, la vitesse de chargement sera évidemment plus lente 3. Séquence de chargement, etc.
Quelle technologie peut remplacer l'iframe
Aug 24, 2023 pm 01:53 PM
Les technologies qui peuvent remplacer les iframes incluent Ajax, les bibliothèques ou frameworks JavaScript, les technologies de composants Web, le routage frontal et le rendu côté serveur. Introduction détaillée : 1. Ajax est une technologie utilisée pour créer des pages Web dynamiques. Il peut réaliser des mises à jour asynchrones de la page en échangeant des données avec le serveur en arrière-plan sans actualiser la page entière. L'utilisation d'Ajax peut charger et afficher le contenu de manière plus flexible, et il n'est pas nécessaire d'utiliser iframe pour intégrer d'autres pages ; ou un framework , comme React et ainsi de suite.
Microsoft : une erreur Outlook télécharge le fichier 'TokenFactoryIframe' à chaque visite
Apr 19, 2023 am 08:25 AM
Microsoft Outlook télécharge un fichier mystérieux appelé « TokenFactoryIframe » sur macOS lorsque les utilisateurs accèdent au service de messagerie via Safari. Ce problème a désormais été largement signalé par les utilisateurs qui ont découvert les fichiers « TokenFactoryIframe » qu'Outlook télécharge à chaque visite. Outlook télécharge ce mystérieux fichier toutes les quelques secondes ou au moins chaque fois que vous accédez à Outlook sur les plateformes Apple. D'après nos conclusions, cela semble être un problème causé par une mise à jour incorrecte côté serveur publiée sur Outlook et n'a rien à voir avec Safari ou macOS. Microsoft dans une copie
Quels sont les événements de chargement d'iframe ?
Aug 28, 2023 pm 01:55 PM
Les événements de chargement de l'iframe incluent l'événement onload, l'événement onreadystatechange, l'événement onbeforeunload, l'événement onerror, l'événement onabort, etc. Description détaillée : 1. événement onload, spécifiant le code JavaScript à exécuter après le chargement de l'iframe ; 2. événement onreadystatechange, spécifiant le code JavaScript à exécuter lorsque l'état de l'iframe change, etc.
Quel est le danger dans les iframes
Sep 08, 2023 pm 03:14 PM
Les dangers liés aux iframes incluent principalement : 1. Les vulnérabilités de sécurité peuvent charger d'autres pages Web via des iframes et mener certaines attaques ; 2. Une percée de la politique de même origine en chargeant des pages Web sous d'autres noms de domaine dans des iframes. la politique d'origine peut être violée. Stratégie pour parvenir à une communication inter-domaines, qui peut être attaquée de manière malveillante ; 3. Problèmes d'exécution de code, les pages Web chargées dans les iframes peuvent exécuter du code JS, ce qui peut entraîner des problèmes de sécurité. 4. Problèmes de référencement, moteurs de recherche ; il se peut que vous ne puissiez pas analyser et indexer correctement le contenu chargé via iframe et plus encore.
Que signifie iframe en Python ?
Aug 25, 2023 pm 03:24 PM
iframe en Python est une balise HTML utilisée pour intégrer une autre page Web ou un autre document dans une page Web. En Python, vous pouvez utiliser diverses bibliothèques et frameworks pour traiter et manipuler les iframes, dont la plus couramment utilisée est la bibliothèque BeautifulSoup, qui peut facilement extraire le contenu d'une iframe d'une page Web et le manipuler et le traiter. Savoir comment gérer et manipuler les iframes est extrêmement utile à la fois pour le développement Web et pour le scraping de données.
