2008-09-17 13 views
60

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 voudrais le passer à la fenêtre du navigateur pop-up.Puis-je transmettre une variable JavaScript à une autre fenêtre du navigateur?

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

Répondre

38

Si les fenêtres proviennent du 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 existante). Chaque fenêtre créée de cette manière obtient une propriété qui lui est appliquée "window.opener" pointant vers la fenêtre qui l'a créée.

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

+12

Les choses ont changé depuis que cette question a été posée. Il est désormais également possible, sur [newer browsers] (http://caniuse.com/#feat=x-doc-messaging), de passer des messages entre des fenêtres sur un domaine de sécurité * différent *, via des appels à 'window.postMessage '. – Brian

-2

La fonction window.open() le permettra également si vous avez une référence à la fenêtre créée, à condition qu'elle se trouve sur le même domaine. Si la variable est utilisée côté serveur, vous devriez utiliser une variable $ _SESSION (en supposant que vous utilisez PHP).

1

Oui, il peut être fait tant que les deux fenêtres sont sur le même domaine. La fonction window.open() retournera un handle à la nouvelle fenêtre. La fenêtre enfant peut accéder à la fenêtre parent en utilisant l'élément DOM "opener".

0

Alternativement, vous pouvez 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); 
2

Dans la fenêtre parent:

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

Puis, en 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 que vous devriez faire vérifier dans l'analyse syntaxique de vos paires clé/valeur mais je ne l'inclue pas ici. Peut-être que quelqu'un peut fournir une routine d'analyse de chaîne de requête JavaScript plus inclusive dans une réponse ultérieure.

80

Mettre le code à la question, vous pouvez le faire à partir de la fenêtre parent:

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

ou cela de la nouvelle fenêtre:

var myVariable = window.opener.thisIsAnObject; 

Je préfère cette dernière, parce que vous aurez probablement besoin attendre que la nouvelle page se charge de toute façon, afin que vous puissiez accéder à ses éléments, ou ce que vous voulez.

+0

Je ne comprends pas {foo: 'bar'}. pourriez-vous s'il vous plaît m'aider à ce sujet? –

+1

@MasoudSahabi, 'var x = {foo: 'bar'}' est juste une syntaxe littérale compacte pour créer un objet. C'est la même chose que 'var x = new Object(); x.foo = 'bar'; ' – sergiopereira

+0

J'utilise le premier et ça marche très bien dans Chrome mais IE semble se plaindre. Et c'est très difficile d'obtenir un breakpoint à frapper. – styfle

7

Oui, les scripts peuvent accéder aux propriétés d'autres fenêtres dans le même domaine sur lequel ils ont un handle (généralement obtenu via window.open/opener et window.frames/parent). Il est généralement plus facile d'appeler les fonctions définies sur l'autre fenêtre plutôt que de manipuler les variables directement. Toutefois, les fenêtres peuvent mourir ou se déplacer, et les navigateurs le font différemment lorsqu'ils le font. Vérifiez qu'une fenêtre (a) est toujours ouverte (! Window.closed) et (b) a la fonction que vous attendez disponible avant de l'appeler.

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

-1

Oui navigateurs effacer tous ref. pour une fenêtre. Donc, vous devez rechercher un nom de classe de quelque chose sur la fenêtre principale ou utiliser des cookies comme Javascript ref maison.

J'ai une radio sur ma page de projet. Et puis vous allumez pour la radio ça commence dans une fenêtre popup et je contrôle les liens de la fenêtre principale sur la page principale et montre l'état du jeu et en FF c'est facile mais dans MSIE pas si facile du tout. Mais cela peut être fait.

3

des variables entre les fenêtres Passing (si vos fenêtres sont sur le même domaine) peuvent se faire facilement via:

  1. Cookies
  2. localStorage. Assurez-vous que votre navigateur prend en charge localStorage et effectuez le droit de maintenance des variables (ajouter/supprimer/supprimer) pour que localStorage reste propre.
2

Vous pouvez passer des variables, et la référence à des choses dans la fenêtre parent 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!"); 
} 
+0

Comme écrit cela ne fonctionnera pas dans le monde réel où les gens exécutent adblock etc .. En ajoutant des paramètres à l'ouverture pour l'ouvrir dans une fenêtre séparée (au lieu de tabulation, comme FF configuré pour faire), je pouvais pour que cela fonctionne dans Firefox. Mais le pop-up a été bloqué dans Chrome. Donc, c'est simple et sorte de travaux, mais c'est un peu loin d'une solution viable. –

0

J'ai eu du mal à passer avec succès des arguments à la nouvelle fenêtre ouverte.
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 en direct

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

0

Vous pouvez utiliser window.name comme tran de données sport entre les fenêtres - et il fonctionne aussi bien sur le domaine. Non officiellement pris en charge, mais à ma connaissance, fonctionne très bien cross browser.

More info here on this Stackoverflow Post

1

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

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

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

la pour être remplacé selon le 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