Beim Anklicken einer Tabellenzelle wechselt der Inhalt eines Iframes mit JavaScript?

...komplette Frage anzeigen

4 Antworten

Alles was du tun musst, ist doch nur einen Klick-Handler anzubinden, die id der Spalte auszulesen und daraufhin das iframe-Attribut zu setzen.

Dies lässt sich auf unterschiedliche Art und Weise lösen. Zum Beispiel:

a) Über alle notwendigen td-Elemente iterieren und ihnen einen Event-Handler anhängen - mit jQuery

b) Über alle notwendigen td-Elemente iterieren und ihnen einen Event-Handler anhängen - mit purem JS (querySelectorAll)

var elements = document.querySelectorAll(".pagetable tbody td");

for (var i = 0; i < elements.length; ++i) {
  elements[i].addEventListener("click", function() {
    document.getElementById("iframe").src = this.id + ".html";
  });
}

Zu beachten ist hierbei, dass die Tabelle die Klasse pagetable haben sollte, um die Auswahl an Zellen zu begrenzen. Schließlich soll nicht jede Tabellenzelle auf der Seite ein Event-Handler zugeordnet bekommen.

Bei jQuery kann der Suchbereich für den Selektor ebenso limitiert werden, siehe dazu in die Dokumentation.

c) Die id weglassen und stattdessen pro Zelle den Event-Listener über das HTML-Attribut aufrufen:

<td onclick="changeFramePage('eins')">Zelle 1</td>

Die Funktion dazu würde dann so aussehen:

function changeFramePage(pagename){
   document.getElementById("iframe").src = pagename + ".html";
}


Noch eine Anmerkung hierzu:

Ich habe eine Tabelle mit 6 Zellen.

Irgendwie schwant mir bereits, dass du da eine Tabelle für ein Navigationsmenü missbrauchen möchtest. Sollte dem so sein, dann lies in der W3C-Dokumentation bitte nochmal genauestens nach, wozu Tabellen wirklich dienen.

Antwort bewerten Vielen Dank für Deine Bewertung
MangoSemmeln 10.10.2017, 16:05

Vielen Dank!!!! Und ja, du hast recht, dass ich mit der Tabelle eine Navigation machen möchte...

0
regex9 10.10.2017, 16:17
@MangoSemmeln

Dafür gibt es andere Elemente (nav, ul, ...). Eine Tabelle dient nicht zur Umsetzung eines Layouts.

0

Du weißt, dass solche Framesets ein altes Relikt von früher sind?

Eine solche Seite hat gravierende Nachteile. 

Besser, du setzt die Navigation mit PHP oder wenigstens mit AJAX um.

ansonsten, wenn es unbedingt sein muss:

document.getElementById("eins").addEventListener("click", function(e) {
document.getElementById("iframe").src = "blablaseiteeins.html";
});
Antwort bewerten Vielen Dank für Deine Bewertung
MangoSemmeln 10.10.2017, 16:02

Danke ich werde es testen. Hört sich aber gut an!

0
Franky12345678 13.10.2017, 19:11
@MangoSemmeln

Sollte aber. 

Da wirste was falsch gemacht haben :-).

Was heißt "funktioniert nicht" genau? 

Wie/wo hast du es verbaut?

Fehlermeldung auf der Console?

IDs korrekt an die Elemente vergeben?

Das Beispiel war nur für die erste Zelle. Du musst diesen Codeschnipsel in Wirklichkeit 6 mal verbauen - Nämlich für jede anklickbare Tabellenzelle. Hast du das gemacht?

Das "blablaeins.html" musst du natürlich auch durch das richtige Ziel ersetzen.

0

Ok, und wo ist das Problem?

Antwort bewerten Vielen Dank für Deine Bewertung
MangoSemmeln 08.10.2017, 13:39

Ich weiß nicht wie das geht.

0
triopasi 08.10.2017, 13:41
@MangoSemmeln

Und was ist das konkrete Problem? Was davon kannst du nicht via Google innerhalb einer Minute herausfinden?

2

<script>

function loadframe(mysite) {

document.getElementById['iframe'].src = mysite;

}

</script>

<td onclick="loadframe('eins.html')">Bla Blub</td>

Antwort bewerten Vielen Dank für Deine Bewertung
RakonDark 08.10.2017, 13:41
document.getElementById('iframe').src = mysite;

korrektur

1
RakonDark 14.10.2017, 17:47
@MangoSemmeln

klar funktioniert das , du brauchst aber auch ein iframe mit der id="iframe" . ich hab es doch nur aus der testseite kopiert .


<html>
<head>
<script>
function loadframe(mysite) {
document.getElementById('iframe').src = mysite;
}
</script>
</head>
<body>
<table>
<td onclick="loadframe('eins.html')">Bla Blub</td>
</table>
<iframe id="iframe" src="about:blank" width="800" height="200" ></iframe>
</body>
</html>


0

Was möchtest Du wissen?