[JS] Popup waarde teruggeven aan opener

[Reveller]

Op een bepaalde pagina, zeg index.htm, wil ik de variabele image een waarde meegeven uit popup.htm.

JavaScript:

/* index.htm */

var image = get_image();

function get_image() {
  var win = window.open('popup.htm', 'popup');
  win.focus();
}

/* popup.htm */
function close_win() {
  var src = document.getElementById('image').value;
  var alt = document.getElementById('alttext').value;

  var str = '<img src="'+ src +'" alt="'+ alt +'">';
  // de waarde van str teruggeven aan de opener pagina
  window.close();
}

Image location: <input id="image" type="text">
Alt text: <input id="alttext" type="text">
<input type="button" onclick="close_win();">

Hoe kan ik in regel 16 de waarde van str teruggeven aan de opener, zodat de variabele "image" op inde.htm deze waarde overneemt?

[intoxicated]

http://www.webreference.com/js/tutorial1/opener.html
Is dit niet gewoon wat je bedoelt, of mis ik iets?

[Reveller]

intoxicated schreef op donderdag 28 december 2006 @ 23:01:
...of mis ik iets?

Missen niet echt Ik was in mijn startpost niet helemaal duidelijk. Alle voorbeelden die ik over window.opener gevonden heb, inclusief die jij aandraagt, retourneert de in de popup geselecteerde waarde aan een formvariabele. In jouw voorbeeld:

JavaScript:

/* popup.htm */
function pick(symbol) {
  if (window.opener && !window.opener.closed)
    window.opener.document.stockForm.stockBox.value = symbol;
  window.close();
}

Met andere woorden: in zijn algemeenheid wordt de waarde in alle voorbeelden geretourneerd aan

JavaScript:

window.opener.document.mijn_form.mijn_variabele.value

Maar mijn probeem is anders: mijn "image" variabele op index.htm (zie startpost) is geen formvariabele. Ik ben op zoek naar een manier waarop ik de in de popup geselecteerde waarde aan een "normale" javascript variabele kan toewijzen, het liefst op een generieke manier.

Simpel gezegd: de werking van de popup moet gelijk zijn aan die van een javascript prompt:

JavaScript:

var image = prompt('Voer image source in:', 'http:\/\/');

Als ik in de prompt een URL intik, en op OK klik, heeft de variabele "image" als waarde van deze URL gekregen. Ik wil datzelfde dus, maar dan via een custom popup Heeft iemand hier ideeen over?

[Reveller]

* kick *

Ik ben er nog steeds niet uit. Welke goeroe weet het antwoord?

[Verwijderd]

Reveller schreef op donderdag 28 december 2006 @ 23:36:

Met andere woorden: in zijn algemeenheid wordt de waarde in alle voorbeelden geretourneerd aan

JavaScript:

window.opener.document.mijn_form.mijn_variabele.value

Dit heb ik in dit forum geloof ik maar enkele honderden keren afgeraden. Gebruik hier gewoon de document.forms array cq collection voor.

JavaScript:

var image = prompt('Voer image source in:', 'http:\/\/');

Als ik in de prompt een URL intik, en op OK klik, heeft de variabele "image" als waarde van deze URL gekregen. Ik wil datzelfde dus, maar dan via een custom popup Heeft iemand hier ideeen over?

De default scope is die van het window object. Elke variabele die niet expliciet in een function scope gedefinieerd wordt, is een property van het window object. Op dezelfde manier zijn gewone functions eigenlijk methods van het window object.
En dus zijn window.opener en opener gewoon hetzelfde. Net als window.setTimeout en setTimeout.

Dit los je het mooist op met een functie in het venster dat de popup opent, zodat je deze als method aan kunt roepen: opener.functieNaam(argument);

[Reveller]

Verwijderd schreef op vrijdag 29 december 2006 @ 19:09:
Dit los je het mooist op met een functie in het venster dat de popup opent, zodat je deze als method aan kunt roepen: opener.functieNaam(argument);

Ik heb moeite om dit te begrijpen. Hoe zou je onderstaande code dan praktisch moeten aanpassen, zodat de variabele image uit index.htm de waarde krijgt van str uit popup.htm?

JavaScript:

/* index.htm */

var image = get_image();

function get_image() {
  var win = window.open('popup.htm', 'popup');
  win.focus();
}

/* popup.htm */
function close_win() {
  var src = document.getElementById('image').value;
  var alt = document.getElementById('alttext').value;

  var str = '<img src="'+ src +'" alt="'+ alt +'">';
  // de waarde van str teruggeven aan de opener pagina
  window.close();
}

Image location: <input id="image" type="text">
Alt text: <input id="alttext" type="text">
<input type="button" onclick="close_win();">

[Verwijderd]

window.opener is een referentie naar het onderliggende window. Als je dus vanuit de popup in het onderliggende window een functie wilt aanroepen, kun je dus vanuit de popup gewoon window.opener.mijnFunctieInOnderliggendeWindow() uitvoeren.

[Reveller]

Verwijderd schreef op vrijdag 29 december 2006 @ 19:50:
[...] gewoon window.opener.mijnFunctieInOnderliggendeWindow() uitvoeren.

Volgens mij praten we langs elkaar heen. Ik weet dat ik vanuit een popup een functie in de opener kan aanroepen. Dat is echter niet wat ik wil. Ik wil "gewoon" de popup een waarde laten retourneren aan een variabele op de opener, net zoals je met een javascript prompt() doet:

JavaScript:

var image = prompt('Voer image source in:', 'http:\/\/');

Wat ik als waarde heb ingevuld in de prompt, wordt toegekend aan de variabele image. Ik wil dus hetzelfde met een popup bereiken. Pseudo:

JavaScript:

var image = window.open('popup.htm', 'images');

Ik wil dus niet de op de popup ingevoerde waarde als input meegeven aan een functie op de opener pagina, maar deze slechts toekennen aan een variabele

[ Voor 31% gewijzigd door Reveller op 29-12-2006 20:06 ]

[Janoz]

Zo gaat dat iig niet werken. Die open functie levert immers geen resultaat op. Je zult het asynchroon moeten doen. Schrijf in je index.htm gewoon een callback functie die een waarde aan image geeft. Deze roep je dan aan vanuit je popup.

[Reveller]

Dan maar via een div. Als het goed is kan ik dan gebruik maken van functies binnen mijn txtEditor object; het is afaik niet mogelijk om dat soort functies vanuit een popup te benaderen. Toch lukt het me ook niet helemaal. Zie hieronder de relevante functies:

JavaScript:

function txtEditor(textarea) {
  var parent = textarea.parentNode;
  this.textarea = parent.removeChild(textarea);
  this.toolbar = this.createToolbar(textarea.name);

  // etc (bouw de editor) ...

  this.createPopups();
}

txtEditor.prototype.createPopups = function() {
  var image = createNode('div', 'image', 'popup');
  image.innerHTML = '<a onclick="this.toolbarAction(\'plain\', \'foobar!\')">';
  document.body.appendChild(image);
}

function createNode(type, name, style) {
  var el = document.createElement(type);
  el.id = name;
  el.className = style;

  return el;  
}

txtEditor.prototype.toolbarAction = function(theAction, text) {
  alert(theAction + ' - ' + text);
}

Ik verwachtte dat ik nu een alert zou krijgen met daarin "plain - foobar!", maar in plaats daarvan krijg ik een "this.toolbarAction is not a function". Hoe kan dit nu?

[ Voor 113% gewijzigd door Reveller op 30-12-2006 00:36 ]

[funkwurm]

Let my code to the talking:

JavaScript:

var myVar='a string, yay';
alert(window.myVar);

Thus:

JavaScript:

var opener.window.myVar=document.forms[0].myInput.value;

[Victor]

funkwurm schreef op zaterdag 30 december 2006 @ 16:20:
Let my code to the talking:

JavaScript:

var myVar='a string, yay';
alert(window.myVar);

Thus:

JavaScript:

var opener.window.myVar=document.forms[0].myInput.value;

Dat gaat nergens over.


Misschien dat je er nog wat aan hebt: http://victorwelling.nl/t...p-returnvalue/opener.html

Klik op "Popup!", vul een waarde in in de popup en klik op "Sluiten". Klik vervolgens op "Waarde van 'foobar'" om de ingevulde waarde weer te geven.

Uitleg in de source.

[Reveller]

Bedankt voor de reakties. Dat werkt perfect zolang je de waarde uit de popup wilt toewijzen aan een globale variabele. In elk ander geval gaat het imho fout. In onderstaande situatie kun je de waarde van de popup niet aan temp toewijzen...toch?

JavaScript:

function foo() {
  var temp;

  openPopup(); // vul in de popup een waarde in en wijs toe aan temp
  
  if (temp == 'bla')
    str = 'het was bla!';
  else
    str = 'het was iets anders';

  alert(str);
}

/**
  * functie heeft niets met foo() te maken, maar bevat toevallig ook een
  * variabele 'temp'
  */
function bar() {
  var temp;

  // doe dingen...
}

Hoe zorg ik er nou voor, dat als ik foo() run, en in de popup 'bla' invul, foo 'het was iets anders' alert?

Tweede vraag: zou iemand ook nog eens zijn hersens willen kraken op mijn vraag uit 2 posts hierboven: Waarom is "this.toolbarAction not a function"? Ik kom er niet uit

[ Voor 16% gewijzigd door Reveller op 30-12-2006 17:08 ]

[Victor]

Reveller schreef op zaterdag 30 december 2006 @ 17:04:
Dat werkt perfect zolang je de waarde uit de popup wilt toewijzen aan een globale variabele. In elk ander geval gaat het imho fout. In onderstaande situatie kun je de waarde van de popup niet aan temp toewijzen...toch?

JavaScript:

function foo() {
  var temp;

  openPopup(); // vul in de popup een waarde in en wijs toe aan temp
  
  if (temp == 'bla')
    str = 'het was bla!';
  else
    str = 'het was iets anders';

  alert(str);
}

/**
  * functie heeft niets met foo() te maken, maar bevat toevallig ook een
  * variabele 'temp'
  */
function bar() {
  var temp;

  // doe dingen...
}

Hoe zorg ik er nou voor, dat als ik foo() run, en in de popup 'bla' invul, foo 'het was iets anders' alert?

Daar zit je dus met het probleem dat het niet synchroon is op te lossen. Je functie foo gaat immers gewoon door terwijl openPopup wordt uitgevoerd. Je zou de functie returnValue natuurlijk wel weer het een en ander in gang laten zetten door een functie aan te roepen met die waarde uit de popup.

Korte samenvatting: je zult altijd vanuit je popup (bij het sluiten ervan bijv.) een functie aan moeten roepen in je opener om verder wat te gaan doen met je returnValue. Het script zal niet wachten tot je popup gesloten is. Wil je dit wel, dan kun je naar een modal dialog gaan kijken. Dit wordt naar mijn weten in ieder geval door IE en Fx ondersteund, maar is geen onderdeel van een standaard. (De implementaties verschillen dan ook).

Tweede vraag: zou iemand ook nog eens zijn hersens willen kraken op mijn vraag uit 2 posts hierboven: Waarom is "this.toolbarAction not a function"? Ik kom er niet uit

This.toolbarAction verwijst in die context naar je anchor. Gebruik txtEditor.toolbarAction.

[Reveller]

Dan is het duidelijk. Ik laat de popups varen en ga ook geen modal dialogs gebruiken omdat deze niet tot een standaard behoren. In plaats daarvan wil ik de "popups" in mijn editor vervangen door div'jes die ik laat verschijnen en verdwijnen.

King_Louie schreef op zaterdag 30 december 2006 @ 17:14:
[...] This.toolbarAction verwijst in die context naar je anchor. Gebruik txtEditor.toolbarAction.

Dat werkt ook niet. Ik krijg dan dezelfde error. De hele code van de editor staat hier. Als je op het knopje "plaatje invoegen" klikt, verschijnt er een div als popup. Klik in die "popup" op de button; er zou nu een string "blaat!"moeten worden ingevoegd in de editor. Daarna moet de popup zich sluiten, maar zo ver komt de code niet eens, omdat txtEditor.toolbarAction niet blijkt te bestaan (?).

Wie ziet wat er fout gaat?