web-dev-qa-db-fra.com

Puis-je transmettre une variable JavaScript à une autre fenêtre de navigateur?

J'ai une page qui engendre une fenêtre de navigateur popup. J'ai une variable JavaScript dans la fenêtre du navigateur parent et je souhaite la transmettre à la fenêtre du navigateur qui est apparue.

Y a-t-il un moyen de faire cela? Je sais que cela peut être fait à travers des cadres dans la même fenêtre de navigateur, mais je ne suis pas sûr que cela puisse être fait à travers des fenêtres de navigateur.

javascriptbrowser
63
Tom Kidd

Si les fenêtres appartiennent au même domaine de sécurité et que vous avez une référence à l'autre fenêtre, oui.

La méthode open () de Javascript renvoie une référence à la fenêtre créée (ou une fenêtre existante si elle en réutilise une). Chaque fenêtre ainsi créée se voit appliquer une propriété "window.opener" pointant vers la fenêtre qui l'a créée.

Chacun peut ensuite utiliser le DOM (en fonction de la sécurité) pour accéder aux propriétés de l'autre, ou à ses documents, cadres, etc.

39
MarkR

En mettant le code à la matière, vous pouvez le faire à partir de la fenêtre parente:

var thisIsAnObject = {foo:'bar'};
var w = window.open("http://example.com");
w.myVariable = thisIsAnObject;

ou ceci depuis la nouvelle fenêtre:

var myVariable = window.opener.thisIsAnObject;

Je préfère ce dernier point, car vous devrez probablement attendre le chargement de la nouvelle page pour pouvoir accéder à ses éléments, ou à tout autre élément de votre choix.

93
Victor

Oui, les scripts peuvent accéder aux propriétés d'autres fenêtres du même domaine pour lequel ils ont un descripteur (généralement obtenus via window.open/opener et window.frames/parent). Il est généralement plus facile de faire appel à des fonctions définies dans une autre fenêtre plutôt que de manipuler directement des variables.

Cependant, les fenêtres peuvent mourir ou continuer, et les navigateurs les traitent différemment quand ils le font. Vérifiez qu'une fenêtre (a) est toujours ouverte (! Window.closed) et que (b) a la fonction que vous attendez disponible avant de tenter de l'appeler.

Les valeurs simples, telles que les chaînes, conviennent, mais il n'est généralement pas judicieux de transmettre des objets complexes tels que des fonctions, des éléments DOM et des fermetures entre fenêtres. Si une fenêtre enfant stocke un objet depuis son ouvre-porte, l'ouvre-porte se ferme, cet objet peut devenir «mort» (dans certains navigateurs tels qu'IE) ou provoquer une fuite de mémoire. Des erreurs étranges peuvent s'ensuivre.

7
bobince

Passer des variables entre les fenêtres (si vos fenêtres sont sur le même domaine) peut être facilement fait via: 

  1. Biscuits 
  2. stockage local. Assurez-vous simplement que votre navigateur prend en charge localStorage et effectuez le droit de maintenance variable (ajouter/supprimer/supprimer) pour maintenir localStorage propre. 
3
Roman M

Vous pouvez passer des variables et faire référence à des choses dans la fenêtre parente assez facilement:

// open an empty sample window:
var win = open("");
win.document.write("<html><body><head></head><input value='Trigger handler in other window!' type='button' id='button'></input></body></html>");

// attach to button in target window, and use a handler in this one:
var button = win.document.getElementById('button');

button.onclick = function() {
     alert("I'm in the first frame!");   
}
2
knut

On peut passer un message de la fenêtre 'parent' à la fenêtre 'enfant':

dans la 'fenêtre parent' ouvrez l'enfant

    var win = window.open(<window.location.href>, '_blank');    
       setTimeout(function(){
                    win.postMessage(SRFBfromEBNF,"*")
                  },1000);
    win.focus();

le à remplacer en fonction du contexte

Dans l'enfant

    window.addEventListener('message', function(event) {
        if(event.srcElement.location.href==window.location.href){
        /* do what you want with event.data */
        }
    });

Le test if doit être modifié en fonction du contexte

2
Brault Gilbert

Dans la fenêtre de votre parent:

var yourValue = 'something';
window.open('/childwindow.html?yourKey=' + yourValue);

Puis dans childwindow.html:

var query = location.search.substring(1);
var parameters = {};
var keyValues = query.split(/&/);
for (var keyValue in keyValues) {
    var keyValuePairs = keyValue.split(/=/);
    var key = keyValuePairs[0];
    var value = keyValuePairs[1];
    parameters[key] = value;
}

alert(parameters['yourKey']);

Il y a potentiellement beaucoup d'erreurs à vérifier lors de l'analyse de vos paires clé/valeur, mais je ne l'inclus pas ici. Quelqu'un peut peut-être fournir une routine d'analyse syntaxique plus complète dans une réponse ultérieure.

2
Grant Wagner

Oui, cela peut être fait tant que les deux fenêtres sont sur le même domaine. La fonction window.open () retournera un descripteur dans la nouvelle fenêtre. La fenêtre enfant peut accéder à la fenêtre parent à l'aide de l'élément "ouvreur" du DOM.

1
Jordan Mack

Vous pouvez utiliser window.name en tant que transport de données entre fenêtres - et cela fonctionne également entre domaines. Pas officiellement supporté, mais à ma connaissance, fonctionne vraiment très bien entre navigateurs.

Plus d'informations ici sur ce message Stackoverflow

0
Brad Parks

Vous pouvez également l'ajouter à l'URL et laisser le langage de script (PHP, Perl, ASP, Python, Ruby, peu importe) le gérer de l'autre côté. Quelque chose comme:

var x = 10;
window.open('mypage.php?x='+x);
0
Milan Babuškov

J'ai eu du mal à passer les arguments avec succès à la nouvelle fenêtre.
Voici ce que je suis venu avec:

function openWindow(path, callback /* , arg1 , arg2, ... */){
    var args = Array.prototype.slice.call(arguments, 2); // retrieve the arguments
    var w = window.open(path); // open the new window
    w.addEventListener('load', afterLoadWindow.bind(w, args), false); // listen to the new window's load event
    function afterLoadWindow(/* [arg1,arg2,...], loadEvent */){
        callback.apply(this, arguments[0]); // execute the callbacks, passing the initial arguments (arguments[1] contains the load event)
    }
}

Exemple d'appel:

openWindow("/contact",function(firstname, lastname){
    this.alert("Hello "+firstname+" "+lastname);
}, "John", "Doe");

Exemple live

http://jsfiddle.net/rj6o0jzw/1/

0
singe3