Externe Webseite im Overlayfenster aufrufen

[fredolin]

Hallo JQuery Gemeinde,

ich habe mir schon etwas selbst in Sachen JQuery und JAvascriptbei gebracht. Doch nun habe ich ein Problem, wie ich eine externe Webseite in einem overlay Fenster öffne.

Wenn ich da etwas Hilfe bekommen könnte oder Denkanstöße, daswäre toll.

Hier mein Code, was ich selber geschrieben habe. Es funktioniert mit Bilder ganz gut.

$('a#scriptcode').click(function() {
	//$('#page_overlay').removeClass('image_out');
	var value = $(this).attr('hash');
	alert(value);
	//$('#openSite').attr('href', value);
										
});

<a href="#3-spalten-layout" name="http://www.webslay.eu/3-spalten-layout"  id="scriptcode">3-spalten-Layout</a>
// Mit diesem Link will ich die Webseite 3-spalten-layout.html in einem OVERLAY Fenster öffnen

// Das ist der Code für das OVERLAY Fenster
<div id="page_overlay" class="image_out">
	<div class="image_overlay_conteainer">
    	<div class="image_overlay_header"></div>
        <div class="image_overlay_content">
			<div id="openSite">
				
			</div>
		</div>
        <div class="image_overlay_footer"></div>
    </div>
</div>

#image_overlay {margin:0;padding:0;top:0px;position:fixed;width:100%;height:100%;z-index:101;display:table;background-color: rgba(254, 254, 254, 0.6);cursor:pointer;}


#image_overlay.image_out {
	display: none;
}

Ich hoffe Ihr könnt damit was anfangen und mir helfen.

Viele Grüße
Fredolin

 

[Quaese]

Hi,

wenn du eine Webseite anzeigen willst, wirst du um einen iFrame nicht herum kommen.

HTML:

<a href="#3-spalten-layout" name="http://www.webslay.eu/3-spalten-layout"  id="scriptcode">3-spalten-Layout</a>
// Mit diesem Link will ich die Webseite 3-spalten-layout.html in einem OVERLAY Fenster öffnen

// Das ist der Code für das OVERLAY Fenster
<div id="page_overlay" class="image_out">
  <div class="image_overlay_conteainer">
      <div class="image_overlay_header"></div>
        <div class="image_overlay_content">
        <iframe id="openSite"></iframe>
    </div>
        <div class="image_overlay_footer"></div>
    </div>
</div>

JavaScript:

$(function(){
    $('a#scriptcode').click(function() {
        var value = $(this).attr('name'),
            iframe = $('#openSite');

        iframe.attr('src', value);
    });
})

Ciao
Quaese

 

[fredolin]

Hi Quaese,

vorab erst mal Danke für deine Hilfe. Doch mit iframe funktioniert es nicht. Ich bin grad dabei etwas mit location und attr('hreft').

Könnte so was funktionieren****

Gruß Fredolin

 

[demrks]

Hast du schon überlegt es nicht mit einem iFrame zu lösen, sondern mit Hilfe von AJAX die HTML Datei in das Overlayfenster zu bringen. Das ganze geht eigentlich relativ einfach über zum Beispiel die "load" Funktion von jQuery: http://api.jquery.com/load/

Alternativ mit etwas mehr Einstellungsmöglichkeiten ginge auch noch die get Funktion von jQuery: http://api.jquery.com/jQuery.get/

Gibt natürlich auch noch weitere Varianten, je nachdem, was du bevorzugst. Ich finde "load" recht komfortabel und einfach einzusetzen, ist aber manchmal auch eher mühsam.

Wenn du allerdings mit der Website interagieren willst, dann geht natürlich, wie oben schon beschrieben höchstwahrscheinlich nur ein iFrame, sonst wird es ein wenig komplexer.

 

[fredolin]

Hallo demrks,

erstmal Danke für deine Posting... und Dein Tipp war super. Nun habe ich habe Schwerigkeiten mein Script so an zu passen, das die Seite in diesem Ov erlay Fenster geöfnet wird.

Hier mein Code

$('#scriptcode').click(function() {
			//var wwwlink = $(this).attr('href');
			//alert(this);
			$('#page_overlay').removeClass('image_out');
			//alert(this);
			$('#location').load(this.href);
											
		});

Mein HTML Code für das Overlay Fenster

<div id="page_overlay" class="image_out">
	<div class="image_overlay_conteainer">
    	<div class="image_overlay_header"></div>
        <div id="location" class="image_overlay_content"></div>
        <div class="image_overlay_footer"></div>
    </div>
</div>

Kann mir da einer helfen****

Gruß
Fredolin

 

[demrks]

Könntest du beschreiben, was genau das Problem ist? Öffnet sich die Seite nicht, ist das CSS falsch?

 

[fredolin]

Hallo demrks,
Das Problem ist, die Webseite öffnet sich nicht im Overlay Fenster sonder im Hauptfenster
in dem die Webseite (Mainfenster) ist.

Gruß fredolin

 

[demrks]

Ich kann leider jetzt nur erahnen, wo der Fehler genau liegt. Ich gehe jetzt mal nicht davon aus, dass es ein CSS Anzeigefehler ist. Prinzipiell sollte dein Code die Seite in #location laden. Da es das allerdings anscheinend nicht macht, gehe ich mal davon aus, dass dein #scripcode ein <a> tag ist? Falls das so sein sollte, dann ist der Fehler relativ klar:

<a> tags sind ja bekanntwerweise dazu da auf eine neue Seite zu verlinken. Da du das in diesem Fall nicht möchtest, sondern nur das "href"-Attribut benutzen willst, um die Seite in ein Container zu laden, musst du das verhindern. Das geht in dem du entweder am Ende "return false;" der Klick-Funktion oder mit der jQuery Funktion "preventDefault()". Wenn man "return false;" benutzt, dann verhindert das nicht nur den Seitenübergang, sondern zusätzlich auch noch, dass das Klickevent bei klickbaren Elternelementen ausgeführt wird ("bubbling up"). Ausführlich wird das zum Beispiel hier beschrieben: http://css-tricks.com/return-false-and-prevent-default/

Also sollte dann hoffentlich dieser Code bei deinem Beispiel funktionieren:

$("#scriptcode").on("click", function(e) {    
     e.preventDefault(); 
     $('#page_overlay').removeClass('image_out');
     $('#location').load($(this).attr("href"));
});