Comment transférer des données entre les compétences du navigateur javascript windows_javascript

L'exemple de cet article décrit la méthode de transfert de données entre les fenêtres du navigateur JavaScript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Résumé :

Nous rencontrons souvent des fenêtres contextuelles pendant le développement d'un projet. Certains utilisent div pour simuler l'effet de fenêtre contextuelle, certains utilisent iframe et certains ouvrent une nouvelle fenêtre via la fonction d'ouverture fournie avec la fenêtre. Ce que je vais partager avec vous aujourd'hui est la dernière façon d'ouvrir la page pour l'interaction des données via la fonction window.open(). Tout d’abord, jetez un œil aux rendus :

Principe :

La fenêtre parent transmet les données à la fenêtre enfant via les paramètres d'URL, et la fenêtre enfant transmet les données à la fenêtre parent via la fonction globale de la fenêtre parent.

Code :
index.html est le suivant :

Copier le code Le code est le suivant :

Document

Bouton
<script><br>          var test = document.getElementById('test');<br>           test.onclick = function() {<br> window.open('./window.html?param1=name&param2=password', '_blank','width=960,height=650,menubar=no,toolbar=no,location=no,directories=no,status=no ,scrollbars=oui,resizing=oui');<br>         };<br>           window.getContent = function(tx) {<br>                 document.getElementById('content').innerText = tx;<br> ><br> </script>

window.html est le suivant :

Copier le code Le code est le suivant :

Document

            Shanghai
           Hangzhou

<script><br>         var params = location.href.substring(location.href.lastIndexOf('?') 1).split('&');<br>            document.getElementById('content').innerText = params;<br>       var ville = document.getElementById('city');<br> City.onchange = fonction() {<br>                 window.opener.getContent(city.value);<br> ><br> </script>

Remarque : Un environnement de service est requis pour fonctionner ici

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

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 précédent：Concepts de base JavaScript_connaissances de baseArticle suivant：Concepts de base JavaScript_connaissances de base

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved