Maison interface Web js tutoriel window.openComment fermer une fenêtre ouverte

window.openComment fermer une fenêtre ouverte

Dec 06, 2023 pm 02:15 PM
window.open

Méthodes pour fermer une fenêtre ouverte : 1. Utilisez "window.close" pour fermer la nouvelle fenêtre ; 2. Utilisez "window.location" pour rediriger ; 3. Utilisez "window.blur" et "window.focus" ; . Utilisez "window.history" pour revenir en arrière ; 5. Utilisez "window.opener".

window.open est une fonction en JavaScript qui ouvre une nouvelle fenêtre ou un nouvel onglet. Cependant, en raison des restrictions de sécurité du navigateur, vous ne pouvez pas revenir directement à la fenêtre ou à l'onglet d'origine à partir d'une nouvelle fenêtre ou d'un nouvel onglet, ni fermer directement la nouvelle fenêtre ou l'onglet. Cela permet d'empêcher les scripts malveillants de fermer des fenêtres ou des onglets à l'insu de l'utilisateur.

Cependant, il existe des moyens de fermer indirectement de nouvelles fenêtres ou de nouveaux onglets. Voici plusieurs méthodes possibles :

1. Utilisez window.close pour fermer la nouvelle fenêtre

Bien que vous ne puissiez pas fermer directement la nouvelle fenêtre ouverte par window.open, vous pouvez appeler la fonction window.close dans la nouvelle fenêtre. Fermez-le. Par exemple :

window.open('https://www.example.com', '_blank');  
// 在新窗口中...  
window.close();

Veuillez noter que seules les fenêtres ouvertes par window.open peuvent être fermées. Les navigateurs n'autorisent généralement pas les scripts à fermer les fenêtres qui n'ont pas été ouvertes par les scripts. De plus, les navigateurs peuvent empêcher un script de fermer une fenêtre contenant window.close à moins que le script ne soit exécuté dans l'environnement sandbox de la fenêtre ou que la fenêtre n'ait été ouverte via window.open .

2. Utilisez la redirection window.location

Vous pouvez rediriger vers une nouvelle page en saisissant une nouvelle URL dans la barre d'adresse de la nouvelle fenêtre, fermant ainsi indirectement la nouvelle fenêtre. Par exemple :

window.open('https://www.example.com', '_blank');  
// 在新窗口中...  
window.location = 'https://www.example2.com';

Dans cet exemple, la nouvelle fenêtre sera redirigée vers la nouvelle URL, fermant ainsi indirectement la fenêtre d'origine. Notez que cette approche peut créer une mauvaise expérience pour l'utilisateur car elle modifie le focus du navigateur.

3. En utilisant window.blur et window.focus

Vous pouvez essayer de faire perdre le focus à la nouvelle fenêtre, puis de la retrouver, ce qui peut la fermer. Par exemple :

window.open('https://www.example.com', '_blank');  
// 在新窗口中...  
window.blur();  // 失去焦点  
setTimeout(function() {  
    window.focus();  // 重新获得焦点  
}, 0);

Cette approche peut ne pas toujours fonctionner car les implémentations des navigateurs peuvent varier. De plus, cette approche peut créer une mauvaise expérience pour l'utilisateur car elle modifie le focus du navigateur.

4. Utilisez window.history pour revenir en arrière

Vous pouvez essayer d'utiliser la méthode back() de l'objet window.history pour revenir à l'entrée précédente de l'historique. Cela peut fermer la nouvelle fenêtre ou le nouvel onglet. Par exemple :

window.open('https://www.example.com', '_blank');  
// 在新窗口中...  
window.history.back();

Veuillez noter que cette méthode peut créer une mauvaise expérience pour l'utilisateur car elle modifie l'historique du navigateur. De plus, cette approche peut ne pas toujours fonctionner, car les implémentations des navigateurs peuvent varier.

5. Utilisez window.opener

Si vous l'avez ouvert dans une nouvelle fenêtre, vous pouvez utiliser la propriété window.opener pour accéder à la fenêtre d'origine. Vous pouvez ensuite fermer la nouvelle fenêtre en appelant window.close() sur la fenêtre d'origine. Par exemple :

Dans la fenêtre d'origine :

var newWindow = window.open('https://www.example.com', '_blank');  
// 在新窗口中...  
newWindow.close();  // 关闭新窗口

Veuillez noter que cette approche peut créer une mauvaise expérience pour l'utilisateur car elle oblige l'utilisateur à fermer manuellement la nouvelle fenêtre. De plus, cette méthode peut ne pas toujours fonctionner en raison des restrictions de sécurité du navigateur.

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 de ce site Web
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

Outils d'IA chauds

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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 !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Sujets chauds

Tutoriel PHP
1545
276
Appareils et contextes avancés JavaScript Appareils et contextes avancés JavaScript Jul 24, 2025 am 12:42 AM

La portée de JavaScript détermine la portée d'accessibilité des variables, qui sont divisées en étendue globale, fonction et au niveau du bloc; Le contexte détermine la direction de cela et dépend de la méthode d'appel de fonction. 1. Les étendues incluent la portée globale (accessible n'importe où), la portée de la fonction (valide uniquement dans la fonction) et la portée au niveau du bloc (LET et const sont valides dans {}). 2. Le contexte d'exécution contient l'objet variable, la chaîne de portée et les valeurs de cela. Cela pointe vers global ou non défini dans la fonction ordinaire, l'appel de méthode pointe vers l'objet d'appel, le constructeur pointe vers le nouvel objet, et peut également être explicitement spécifié par appel / application / liaison. 3. La fermeture fait référence aux fonctions accédant et en se souvenant des variables de portée externes. Ils sont souvent utilisés pour l'encapsulation et le cache, mais peuvent provoquer

API de composition Vue 3 Vs API Options: une comparaison détaillée API de composition Vue 3 Vs API Options: une comparaison détaillée Jul 25, 2025 am 03:46 AM

CompositionAPI dans Vue3 convient plus à la logique complexe et à la dérivation de type, et OptionsAPI convient aux scénarios et débutants simples; 1. OptionsAPI organise le code en fonction d'options telles que les données et les méthodes, et a une structure claire mais les composants complexes sont fragmentés; 2. CompositionAPI utilise la configuration pour concentrer la logique liée, ce qui est propice à la maintenance et à la réutilisation; 3. CompositionAPI réalise la réutilisation logique sans conflit et paramétrisable par le biais de fonctions composables, ce qui est mieux que le mixin; 4. CompositionAPI a une meilleure prise en charge de la dérivation de type dactylographiée et de type plus précise; 5. Il n'y a pas de différence significative dans le volume de performances et d'emballage des deux; 6.

Maîtriser les modèles de concurrence JavaScript: les travailleurs du web contre les threads Java Maîtriser les modèles de concurrence JavaScript: les travailleurs du web contre les threads Java Jul 25, 2025 am 04:31 AM

Il existe une différence essentielle entre les travailleurs Web de JavaScript et Javathreads dans un traitement simultané. 1. JavaScript adopte un modèle unique. WebWorkers est un fil indépendant fourni par le navigateur. Il convient pour effectuer des tâches longues qui ne bloquent pas l'interface utilisateur, mais ne peuvent pas utiliser le DOM; 2. Java prend en charge le multithreading réel à partir du niveau de la langue, créé via la classe de threads, adapté à un traitement simultanée complexe et côté serveur; 3. Les travailleurs Web utilisent PostMessage () pour communiquer avec le fil principal, qui est hautement sécurisé et isolé; Les threads Java peuvent partager la mémoire, de sorte que les problèmes de synchronisation doivent être prêts à prêter attention; 4. Les travailleurs Web sont plus adaptés à l'informatique parallèle frontale, comme le traitement d'image, et

Construire un outil CLI avec Node.js Construire un outil CLI avec Node.js Jul 24, 2025 am 03:39 AM

Initialiser le projet et créer package.json; 2. Créez un script d'entrée index.js avec shebang; 3. Registre des commandes via des champs bin dans package.json; 4. Utilisez des Yargs et d'autres bibliothèques pour analyser les paramètres de ligne de commande; 5. Utilisez le test local NPMLink; 6. Ajouter l'aide, la version et les options pour améliorer l'expérience; 7. Publier éventuellement via NPMPublish; 8. Affectuer éventuellement l'achèvement automatique avec Yargs; Enfin, créez des outils CLI pratiques grâce à une structure raisonnable et à une conception de l'expérience utilisateur, effectuer des tâches d'automatisation ou distribuer des widgets et se terminer par des phrases complètes.

Comment créer et ajouter des éléments dans JS? Comment créer et ajouter des éléments dans JS? Jul 25, 2025 am 03:56 AM

Utilisez Document.CreateElement () pour créer de nouveaux éléments; 2. Personnaliser les éléments via TextContent, ClassList, SetAttribute et d'autres méthodes; 3. Utilisez des méthodes APPEDCHILD () ou plus flexibles APPEND () pour ajouter des éléments au DOM; 4. Utiliser éventuellement INSERTBEFORE (), avant () et d'autres méthodes pour contrôler la position d'insertion; Le processus complet consiste à créer → Personnaliser → Ajouter, et vous pouvez mettre à jour dynamiquement le contenu de la page.

Types conditionnels avancés en dactylographie Types conditionnels avancés en dactylographie Aug 04, 2025 am 06:32 AM

Les types de conditions avancées de TypeScript implémentent le jugement logique entre les types via TextendU? X: Y Syntaxe. Ses capacités de base se reflètent dans les types de conditions distribuées, l'inférence de type inférieure et la construction d'outils de type complexe. 1. Le type conditionnel est distribué dans les paramètres de type nu et peut automatiquement diviser le type de joint, tel que pour obtenir la chaîne [] | nombre []. 2. Utiliser la distribution pour construire des outils de filtrage et d'extraction: exclut exclut les types via TextendU? Never: T, extraire extrait les points communs via TextendU? T: jamais, et des filtres non nuls nuls / non définis. 3

Architecture Micro Frontend: un guide de mise en œuvre pratique Architecture Micro Frontend: un guide de mise en œuvre pratique Aug 02, 2025 am 08:01 AM

MicrofronttendSSolvescalingCallegengeSInLargeTeamsByAnabled indépendante développement et élaboration de choOsanIntegrationsStrategy: UseModuleFederationInwebpack5ForruntimeLoadingAndTrue Independence, Build-Time IntegrationForsIpleSetups, Oriframes / webcomponents webcomponents

Quelles sont les différences entre VAR, LET et const dans JavaScript? Quelles sont les différences entre VAR, LET et const dans JavaScript? Aug 02, 2025 pm 01:30 PM

varisfunction-scoped,canbereassigned,hoistedwithundefined,andattachedtotheglobalwindowobject;2.letandconstareblock-scoped,withletallowingreassignmentandconstnotallowingit,thoughconstobjectscanhavemutableproperties;3.letandconstarehoistedbutnotinitial

See all articles