Aus dem PopUp heraus Elemente auf der aufrufenden Seite steuern

Stell Dir eine Situation vor, die verlangt, dass Du aus einem generierten PopUp heraus bestimmte Elemente der aufrufenden Seite (parent site) steuern können musst. Jetzt wäre doch eine Funktionsweise nett, die ohne Ajax und ohne Aufrufparameter oder gar ohne Neuladen der Seite die Optionen auf der ursprünglichen Seite aus dem PopUp heraus verändern könnte, oder?

Ein Beispiel wäre ein PopUp, dass die Auswahlmöglichkeiten in einer Dropdown Liste beschreibt. Für den User ist es dann sicherlich schön bereits im PopUp das Element auswählen zu können ohne die Dropdown Liste noch einmal anfassen zu müssen, oder? Ich denke, da stimmst Du mir zu! Aus UX Sicht vermeidet das einige unnötige Klicks und eine Menge kognitiver Belastung.

Optionen einer Dropdown Liste per JavaScript auswählen

Zuerst müssen wir die jeweiligen Optionen einer Dropdown Liste per JavaScript auswählen können.
Nehmen wir die folgende Dropdown Liste als Beispiel:

<select name="sel"> 
  <option value="o1">option1</option>
  <option value="o2">option2</option>
</select>

Jetzt kann ich bspw. mit einem Button eine der beiden Optionen auswählen. Das geht auf Zwei Arten.

1. Ich wähle die passende Option anhand des Indexes [0..i] aller Optionen
2. Ich wähle die passende Option anhand des value innerhalb aller Optionen

1. Die passende Option anhand des Indexes auswählen

<input type="button" value="choose option2" onclick="document.getElementsByName('sel')[0].selectedIndex = 1;">

2. Die passende Option anhand des option value auswählen

<input type="button" value="choose option2" onclick="document.getElementsByName('sel')[0].value='o2';">

Vielen Dank an dieser Stelle an Xavi López

Dieses Beispiel auf jsFiddle ansehen

Optionen einer Dropdown Liste per PopUp verändern

Nehmen wir wieder das gleiche Beispiel. Folgendes steht dann auf der Elternseite — also der Seite, die das PopUp aufruft:

<select name="sel"> 
  <option value="o1">option1</option>
  <option value="o2">option2</option>
</select>

<input type="button" value="choose option2" onclick="window.open('link', 'PopUp', 'height=200,width=200,toolbar=0,location=0,menubar=0,resizable,scrollbars').focus(); return false;">

Der Button öffnet dann eine html Seite als PopUp auf der Infos zu den Auswahloptionen stehen. Auf der PopUp Seite befinden sich zusätzlich nun auch Buttons, die die Auswahl in der Dropdown Liste übernehmen sollen. Jetzt kann man glücklicherweise dank opener(); sehr einfach auf das Elternobjekt — also die PopUp öffnende Seite — zugreifen. Vielen Dank an dieser Stelle an con-f-use

Die Buttons würden dann also wie folgt aussehen:

<input type="button" value="choose option1" onclick="opener.document.getElementsByName('sel')[0].value='o1';self.close();">

<input type="button" value="choose option2" onclick="opener.document.getElementsByName('sel')[0].value='o2';self.close();">

das self.close(); bewirkt das Schließen des PopUps nachdem die Option ausgewählt wurde.