✔ OnLoad Event - soll Link erweitern

[BitMan]

Hallo Leute,

ich bin eher im Bereich PHP, C# und VBA unterwegs und muss mir mal für meine neue Webseite was basteln wozu ich dann ein wenig JavaScript brauche.

Es geht um meine Hobby-Fotografen-Seite wo ich aus einer Übersicht der Gallerien, durch klicken einer Gallerie dann zu den einzelnen Gallerien komme und wenn ich da ein Bild anklicke, dann soll das in Flash oder HTML geladen werden. Nun brauch ich dafür die Bildschirm-Breite/Höhe falls auslesbar.

So sieht der Link aktuell aus der dann am Ende Breite und Höhe mit übertragen soll, das PHP die Variablen auslesen und nutzen kann....

<a href="gallerie_load.php?gal=xA" onclick="onGalleryLoad();"><div class="txt"><? include_once("galleryA/settings/titel.php"); ?></div></a>

und hier ist meine funktion onClick:

<script type="text/javascript">
<!--
	function onGalleryLoad()
	{
		this.blur();
		
	}
//-->
</script>

1. Das this.blur() bezog sich vorher bei "onclick="this.blur();" direkt auf den Link. Macht das überhaupt Sinn das in die Funktion aus zu lagern. Welches Objekt wird in dem Beispiel mit THIS angesprochen?

2. Kann ich in meiner Funktion noch Einfluss auf den Link nehmen und einfach mit &width=1024&height=768 erweitern, was ich dann natürlich durch die JavaScript Variablen ersetzen werde.

3. Welche Methoden/Eigenschaften im JavaScript funktionieren hinsichtlich der Bildschirm-Breite (abzüglich Symbolleisten, Scrollbalken) auf den meisten Browsern?

Wäre schön wenn ich hier eine Antwort bekomme...

Merci!
BitMan

 

[Quaese]

Hi,

zu 1.)
Wird die Anweisung im onclick-Event direkt aufgerufen, so handelt es sich bei this um eine Referenz auf das auslösende Element. Wird sie wie in deinem Beispiel in einer Funktion verwendet, so bezieht bezieht sie sich auf das Funktionsobjekt, in dessen Gültigkeitsbereich sie sich befindet.

Korrekt wäre in deinen Fall:

<a href="gallerie_load.php?gal=xA" onclick="onGalleryLoad(this);"><div class="txt"><? include_once("galleryA/settings/titel.php"); ?></div></a>

Die Referenz wird an die Funktion übergeben.

function onGalleryLoad(objThis){
  objThis.blur();
}

zu 2.)
Du kannst jederzeit im onclick-Handler Einfluss auf die URL-Parameter nehmen. Mit obiger Funktion könnte das wie folgt aussehen:

function onGalleryLoad(objThis){
  objThis.blur();
  objThis.href += "?width=1024&height=768";
}

zu 3.)
In SelfHTML gibt es ein Beispiel zum Ermitteln der Fensterdimensionen. Dieses habe ich leicht modifiziert, damit auch im IE die korrekten Grössen ausgegeben werden. Damit könnte deine Anwendung wie folgt aussehen:

function Fensterweite () {
  if (window.innerWidth) {
    return window.innerWidth;
  } else if(document.all && !window.opera){
    return (window.document.compatMode == "CSS1Compat")? window.document.documentElement.clientWidth : window.document.body.clientWidth || null;
  } else if (document.body && document.body.offsetWidth) {
    return document.body.offsetWidth;
  } else {
    return 0;
  }
}

function Fensterhoehe () {
  if (window.innerHeight) {
    return window.innerHeight;
  } else if (document.all && !window.opera){
    return (window.document.compatMode == "CSS1Compat")? window.document.documentElement.clientHeight : window.document.body.clientHeight || null;
  } else if (document.body && document.body.offsetHeight) {
    return document.body.offsetHeight;
  } else {
    return 0;
  }
}

function onGalleryLoad(objThis){
  objThis.blur();
  objThis.href += "?width=1024&height=768";
}

Ciao
Quaese

 

[BitMan]

...to Quaese

Hey Merci,

das nenn ich doch mal aufschlussreiche Info. Merci...

Muss echt mal schauen das ich irgendwo ein JavaScript Einstiegskurs mache wo ich mal ein wenig mehr zu den Objekten kennen lerne.

Hab dann einfach mal so was draus gebaut:

<script type="text/javascript">
<!--
	function onGalleryLoad(objThis)
	{
		var clWth = getWidth();
		var clHgt = getHeight();
		objThis.blur();
		objThis.href += "&width=";
		objThis.href += clWth;
		objThis.href +="&height=";
		objThis.href += clHgt;
	}
	
	function getWidth () 
	{
		if (window.innerWidth) 
		{
			return window.innerWidth;
		}
		else if(document.all && !window.opera)
		{
			return (window.document.compatMode == "CSS1Compat")? window.document.documentElement.clientWidth : window.document.body.clientWidth || null;
		} 
		else if (document.body && document.body.offsetWidth) 
		{
			return document.body.offsetWidth;
		}
		else 
		{
			return 0;
		}
	}
	
	function getHeight()
	{
		if (window.innerHeight) 
		{
			return window.innerHeight;
		}
		else if (document.all && !window.opera)
		{
			return (window.document.compatMode == "CSS1Compat")? window.document.documentElement.clientHeight : window.document.body.clientHeight || null;
		}
		else if (document.body && document.body.offsetHeight) 
		{
			return document.body.offsetHeight;
		}
		else 
		{
			return 0;
		}
	}


	
//-->
</script>