Javascript Girl
  1. Javascript Girl
  3. Transférer des données d'un fichier HTML à un autre
Intereting Posts
Window.location.href ne fonctionne pas sur IE Amélioration des temps de chargement de Javascript – Concaténation vs beaucoup + Cache Parse déployer du code nuage en panne avec le message "La mise à jour a échoué avec une erreur interne" La fonction Javascript ne peut pas être trouvée TinyMCE et Firefox 11 Comment obtenir la longueur du texte d'entrée et valider l'utilisateur en javascript Séquence d'exécution de la méthode d'action Expression régulière pour supprimer le nom d'hôte et le port de l'URL? Ouvrir des liens, l'un après l'autre PhoneGap sur Android ne charge pas de scripts externes La meilleure façon d'obtenir la liste des dossiers et des fichiers sous Javascript Comment puis-je transformer ce code javascript couramment utilisé en un plugin? Javascript jquery fade-in / fadeout loop, comment utiliser timer? Récupérer les onglets ouverts sur Chrome? Intercepter toutes les pressions de touches avec jQuery avant qu'elles ne soient traitées

Transférer des données d'un fichier HTML à un autre

Je suis nouveau sur HTML et Javascript. Ce que j'essaie de faire, c'est an HTML fichier an HTML , je veux extraire les éléments qui s'y trouvent et l'afficher sur another HTML fichier another HTML via Javascript

Voici ce que j'ai fait jusqu'ici pour le tester:
Test.html 

 <html> <head> <script language="javascript" type="text/javascript" src="asd.js"></script> </head> <body> <form name="form1" action="next.html" method="get"> name:<input type ="text" id="name" name="n"> <input type="submit" value="next" > <button type="button" id="print" onClick="testJS()"> Print </button> </form> </body> </html>

Suivant.html 

 <head> <script language="javascript" type="text/javascript" src="asd.js"></script> </head> <body> <form name="form1" action="next.html" method="get"> <table> <tr> <td id="here">test</td> </tr> </table> </form> </body> </html>

Asd.js 

 function testJS() { var b = document.getElementById('name').value document.getElementById('here').innerHTML = b; }

test.html -> ads.js (extraire la valeur de test.html et configurer à next.html) -> next.html

Essayez ce code: Dans testing.html 

 function testJS() { var b = document.getElementById('name').value, url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b); document.location.href = url; }

Et dans next.html: 

 window.onload = function () { var url = document.location.href, params = url.split('?')[1].split('&'), data = {}, tmp; for (var i = 0, l = params.length; i < l; i++) { tmp = params[i].split('='); data[tmp[0]] = tmp[1]; } document.getElementById('here').innerHTML = data.name; }

Description: javascript ne peut pas partager de données entre différentes pages, et nous devons utiliser certaines solutions, p.ex. URL get params (dans mon code, j'ai utilisé cette façon), cookies, localStorage, etc. Enregistrez le paramètre de nom dans URL (? Nom = …) et dans next.html analysez l'URL et obtenez tous les paramètres de la page précédente.

PS. Je suis un locuteur non-natif, veuillez corriger mon message si nécessaire

La manière ancienne de définir une variable globale qui persiste entre les pages est de configurer les données dans un cookie. La façon moderne est d'utiliser Local Storage, qui a un bon support de navigateur (IE8 +, Firefox 3.5+, Chrome 4+, Android 2+, iPhone 2+). L'utilisation de localStorage est aussi simple que l'utilisation d'un tableau: 

 localStorage["key"] = value; ... in another page ... value = localStorage["key"];

Vous pouvez également joindre les gestionnaires d'événements pour écouter les modifications, bien que l'API de l'événement soit légèrement différente entre les navigateurs. En savoir plus sur le sujet.

En supposant que vous parlez de ce js dans l'environnement du navigateur (contrairement à d'autres comme nodejs), malheureusement, je pense que ce que vous essayez de faire n'est pas possible simplement parce que ce n'est pas la façon dont il est censé fonctionner.

Les pages Html sont livrées au navigateur via le protocole HTTP, qui est un protocole «sans État». Si vous aviez toujours besoin de passer des valeurs entre les pages, il pourrait y avoir 3 approches:

  1. Cookies de session
  2. HTML5 LocalStorage
  3. POST la variable dans l'url et les récupérer dans next.html via l'objet window 
 <html> <head> <script language="javascript" type="text/javascript" scr="asd.js"></script> </head> <body> <form name="form1" action="#" method="get"> name:<input type ="text" id="name" name="n"> <input type="submit" value="next" > <button type="button" id="print" onClick="testJS()"> Print </button> </form> </body>

Script côté client 

 function testJS(){ var name = jQuery("#name").val(); jQuery.load("next.html",function(){ jQuery("#here").html(name); }); }

JQuery est une bibliothèque js et cela simplifie sa programmation. Je recommande donc d'utiliser jQuery rathar puis js. Ici, j'ai juste pris de la valeur de l'entrée elemnt (id = name) lors de l'événement de bouton de soumission, puis chargé la page souhaitée (next.html), si la fonction de chargement s'exécute avec succès j'appelle une fonction qui placera les données dans l'endroit souhaité.

Fonction de chargement jquery http://api.jquery.com/load/

Vous pouvez simplement envoyer les données en utilisant window.location.href first store la valeur à envoyer de testing.html dans la variable script, variable say

<script> var data = value_to_send window.loaction.href="next.htm?data="+data </script>

Cela fait l'objet d'une demande d'obtention