iFrame mit Link auf den eigentlichen Inhalt?
Hallo zusammen,
ich würde gerne einen iFrame erstellen der die Inhalte einer Website nur anzeigt aber wenn man auf den inhalt klickt geht ein weiterer tab auf, der auf die richtige Seite verweist. Habt Ihr Ideen? Ich hab schon gegoogeld aber bin nicht wirklich auf ein Ergebnis gekommen. Danke für eure Hilfe. ._)
2 Antworten
Soll man in dem Frame navigieren können, sprich scrollen oder soll einfach nur die Seite angezeigt werden?
Falls letzteres, kannst du einen Div-Container über den iFrame legen und wenn der User dann darauf klickt, öffnest du einfach die Seite im neuen Tab.
Wie du das mit dem neuen Tab machst, findest du hier: https://stackoverflow.com/questions/15551779/open-link-in-new-tab-or-window
Dann leg einfach einen Div-Container drüber. Wenn man dann nun auf den Container klickt, dieser ist ja vor dem Frame, dann öffnet sich die Seite im neuen Tab.
Machste mit z-index und absoluter position im CSS.
Das Problem ist ich möchte das gerne als Widget in IBM Connections einbinden. Und da geht nur HTML.
Nehmen wir mal an das wäre das iFrame:
<iframe title="Testiframe" src="https:\\test123.com" style="border: 0px currentColor; border-image: none; width: 100%; height: 750px;" hastooltip="dijit_Tooltip_1053" sandbox="allow-same-origin allow-top-navigation allow-scripts allow-popups allow-forms"></iframe>
Naja gut, aber du benutzt doch CSS ... das was hinter style="" steht, ist CSS Code ;-)
Das heißt also ich mach einen Div Container und verweise auf den iFrame? :-)
Versuch mal folgendes:
<div onclick="(function(){
var win = window.open('https:\\test123.com', '_blank');
win.focus();
})();">
<iframe title="Testiframe" src="https:\\test123.com" style="border: 0px currentColor; border-image: none; width: 100%; height: 750px; position: relative;" hastooltip="dijit_Tooltip_1053" sandbox="allow-same-origin allow-top-navigation allow-scripts allow-popups allow-forms"></iframe>
</div>
Wichtig ist, das der iFrame noch Position relative bekommt, sonst funktioniert der z Index nicht. Der Div braucht kein z-index.
Hi generell scheint es zu funktonieren bis der iFrame sich mit dem Inhalt füllt, dann klappt es wieder nicht. Dann kann ich nicht reinklicken und werde nicht auf die andere Seite verwiesen. :-(
Hast du auch die überarbeitete Version gesehen? Habe den anderen Kommentar löschen lassen.
Ja habe den Code so eingetragen doch leider funktioniert es nur bis der Inhalt des iFrames sich lädt. Danach nicht mehr.
Hmm ... bei mir funktioniert es einwandfrei.
Ich habe hier mal eine Testseite gemacht. Da Google und Gutefrage.net nicht funktionieren, hab ich als Testseite meine Seite eingefügt:
https://1drv.ms/u/s!AoH0G9wLuqHdh4UZBh9_c2jxtErCdQ
Einfach runterladen und doppelklick drauf machen.
Wirst sehen, wenn die Seite geladen ist, kannst du trotzdem drauf klicken.
Mmm eigenartig :-( Mist das dass nicht klappt. Danke dir dennoch :-)
Der Code ist genau gleich, bis auf diese zusätzlichen Sachen von dir?
Wäre es möglich eine durchsichtige Grafik darüberzustülpen die auf den Link verweist, sodass man an die Steuerelemente des iFrames garnicht drankommt?
Naja, was hast du denn vor, vielleicht kannst du mir auch mal dein Vorhaben per Privater Nachricht schicken, falls du das hier nicht öffentlich preisgeben willst.
Pack ein div-Element mit ID um den iframe und weise diesem in JS einen Event-Handler zu.
document.getElementById("idOfYourDiv").addEventListener("click", function() {
location.href = "your URL";
});
Hi Xearox, genau die Seite soll lediglich den Inhalt anzeigen aber man soll darin nicht agieren können. Sobald ich auf den Inhalt klicke sollte sich die Komplette Seite in einem neuen Tab öffnen.