Url-Standard erstellen

[elyion_g2]

Hi Leute,

Erstmal danke für euer Interesse an diesem Thema,
Und noch: Entschuldigung für den Titel des Themas, mir ist nichts treffendes eingefallen...

Folgendes möchte ich versuchen:

</style>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

Mit diesem Script kann man in einem DIV einen Inhalt neuladen / besser gesagt: es sind keine iFrames mehr nötig.

Nur: hier ist ein Link wie folgendermassen nötig:

<a href="javascript:ajaxpage('ordner/seite.html', 'contentdiv');">Linktitel</a>

Jetzt wollte ich fragen, ob man für einen Link das "javascript:ajaxpage('','contentdiv');" irgendwie zum standard machen kann, sprich dass man dann bei dreamweaver o.Ä. nur noch den link an sich eintragen muss "ordner/seite.html" ... ?

Wisst ihr in etwa was ich meine?

Wenn nicht, fragt bitte nach, ich weiss nur fast nicht wie ich das noch anders formulieren soll ...

Vielen Dank für eure Hilfe

 

[kyle66]

AW: Url-Standard erstellen

Naja, man könnte das JS ja auslagern. z.B. etwas in der Art (ungetestet)

window.addEventListener('DOMContentLoaded', function() {
   var allLinks = document.querySelectorAll("a");
   for(var i=0; i<allLinks.length; i++)
   {
      allLinks[i].onclick = function {
         ajaxpage(this.href,'contentdiv');
         return false;
      }
   }
}, false);

und im href nur den normalen Link reinschreiben.


Grüße
kyle

 

[elyion_g2]

AW: Url-Standard erstellen

Naja, man könnte das JS ja auslagern. z.B. etwas in der Art (ungetestet)

window.addEventListener('DOMContentLoaded', function() {
   var allLinks = document.querySelectorAll("a");
   for(var i=0; i<allLinks.length; i++)
   {
      allLinks[i].onclick = function {
         ajaxpage(this.href,'contentdiv');
         return false;
      }
   }
}, false);

und im href nur den normalen Link reinschreiben.


Grüße
kyle

Moment jetzt, ich bin hier noch nicht so gut drin,

das wäre jetzt nur ein teil des script's oder? ... wo müsste ich diesen in meinem oben aufgeführten script einfügen?

die lösung an sich verstehe ich, klingt schonmal gut...

UND: vielen dank für die schnellen antworten!

 

[kyle66]

AW: Url-Standard erstellen

Den Teil schreibst du unabhängig von deinem Code (also irgendwo davor oder danach). Hier wird ja nur der Event registriert. Ausgeführt wird er erst nachdem das Document geladen ist.

Achtung: Die Funtkionen window.addEventListener und document.querySelectorAll solltest du ersetzen (z.B. durch window.onload = function() {...}, bzw. document.getElementsByTagName('A')). Das hatte ich jetzt nur aus einem meiner Ckripte rauskopiert, das funktioniert aber nicht in jedem Browser.

 

[elyion_g2]

AW: Url-Standard erstellen

danke für deine antwort.

hier hattes einen Syntaxfehler (zeigt mir Dreamweaver an) :

{
       allLinks[i].onclick = function {
         ajaxpage(this.href,'contentdiv');
         return false;
      }
   }

Habe ihn bis jetzt aber noch nicht gefunden...

Achtung: Die Funtkionen window.addEventListener und document.querySelectorAll solltest du ersetzen (z.B. durch window.onload = function() {...}, bzw. document.getElementsByTagName('A')). Das hatte ich jetzt nur aus einem meiner Ckripte rauskopiert, das funktioniert aber nicht in jedem Browser.

Sprich das müsste dann etwa so aussehen?

<script type="text/javascript">
window.onload = function() {
   var allLinks = document.getElementsByTagName('A');
   for(var i=0; i<allLinks.length; i++)
   {
       allLinks[i].onclick = function {
         ajaxpage(this.href,'contentdiv');
         return false;
      }
   }
}, false);
</script>

 

[kyle66]

AW: Url-Standard erstellen

Fast:

window.onload = function() {
   var allLinks = document.getElementsByTagName("A");
   for(var i=0; i<allLinks.length; i++)
   {
      allLinks[i].onclick = function() {
         ajaxpage(this.href,'contentdiv');
         return false;
      }
   }
}

 

[elyion_g2]

AW: Url-Standard erstellen

Danke vielmals!

Leider hat es nicht funktioniert. Es öffnet den Link immer neu, anstatt ihn im
<div id="contentdiv">Hier müsste der Inhalt hineingeladen werden</div> lädt.

 

[kyle66]

AW: Url-Standard erstellen

Testest du auf einem Server oder lokal? Denn lokal kann es nicht funktionieren, weil das Ajax dort nicht läuft. Deswegen gibt es einen JS-Fehler, der JS-Code wird beendet (ohne return false, was eigentlich den Link aufruf verhindern soll) und der Link wird aufgerufen.

Noch eie Frage, hast du auch Domainübergreifende Links? Wenn ja, funktioniert das AJAX aus Sicherheitsgründen auch nicht so ohne weiteres. Es gibt aber eine Möglichkeit mittels JSONP, oder einfach jquery benutzen und crossDomain auf true setzen.

 

[elyion_g2]

AW: Url-Standard erstellen

nö, ich teste auf einem server online - und habe keine domain-übergreifende links

 

[kyle66]

AW: Url-Standard erstellen

Seltsam, bei mir funktioniert es (auch mit deinem Code in die Seite kopiert). Kannst du im Browser dein Javascript debuggen? Da muss irgendwo noch ein Fehler sein. Denn wenn alles fehlerfrei durchlaufen würde, würde im schlimmsten Fall gar nichts passieren. Der Link dürfte aber niemals aufgerufen werden.

 

[elyion_g2]

AW: Url-Standard erstellen

komisch, sobald ich das mal nochmals von vorne anfange, sprich eine neue datei erstelle und so das ganze neu mache, funktioniert es... wie hier www.hydremag.ch/noiframe ...

dann mache ich eben alles neu, dann müsste es ja funktionieren.

eine frage habe ich noch, währe es auch möglich, dass was wir jetzt haben noch zu erweitern mit einer ID auf dem Link oder so? damit ich auf einer seite mehrere solche "aufrüfe" machen kann oder eben nicht jeder link auf der seite im div geladen wird...?

Ich danke dir aber bereit schon vielmals für das, ist schon gold wert!

 

[kyle66]

AW: Url-Standard erstellen

ID ist schlecht Klasse ist gut. z.B. <a href="#" class="openInDiv">

und dann document.getElementsByClassName();

window.onload = function() {
   var allLinks;
   if (document.getElementsByClassName)
      allLinks = document.getElementsByClassName("openInDiv");
   else
      allLinks = getElementsByClassName(document, "A", "openInDiv")

   for(var i=0; i<allLinks.length; i++)
   {
      allLinks[i].onclick = function() {
         ajaxpage(this.href,'contentdiv');
         return false;
      }
   }
}

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];      
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }   
    }
    return (arrReturnElements)
}

Zur Info: Neue Browser kennen document.getElementsByClassName(ClassName). Für ältere Browser wird eine ähnliche Funktion per Hand geschrieben.

 

[elyion_g2]

AW: Url-Standard erstellen

wo muss ich hier die class-name einfügen?

und bei diesem script zeigt er mir beim letzten } wieder einen Syntaxfehler an...

 

[kyle66]

AW: Url-Standard erstellen

"openInDiv" ist bei mir der ClassName bzw.

window.onload = function() {
   var allLinks;
   if (document.getElementsByClassName)
      allLinks = document.getElementsByClassName("HIER CLASSNAME EINTRAGEN");
   else
      allLinks = getElementsByClassName(document, "A", "HIER CLASSNAME EINTRAGEN");

   for(var i=0; i<allLinks.length; i++)
   {
      allLinks[i].onclick = function() {
         ajaxpage(this.href,'contentdiv');
         return false;
      }
   }
}

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];      
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }   
    }
    return (arrReturnElements);
}

Syntaxfehler habe ich keinen, vielleicht hast du nicht alles erwischt beim kopieren?

 

[elyion_g2]

AW: Url-Standard erstellen

so hab das mal alles eingefügt, jetzt funktioniert gar nichts mehr, also er öffnet den link einfach (wie ein normaler link) ohne irgendwelche specials.

www.hydremag.ch/noiframe - 2 links - der eine link soll den einen inhalt beim roten div laden und der andere in den grünen

 

[Myhar]

AW: Url-Standard erstellen

Copy-Paste ohne den elementaren Sinn eines Skripts verstanden zu haben, finde ich auch immer sehr sinnvoll.
allLinks = document.getElementsByClassName("OpenInDiv");
Wo sind denn deine Links mit der Klasse "OpenInDiv"? Die hast du nicht, deshalb geht es auch nicht.

 

[elyion_g2]

AW: Url-Standard erstellen

tut mir leid, ich komm glaub ich nicht mehr ganz nach:

<body>
<a href="zwei.html" class="OpenInDiv">Das ist der Link</a> <a href="zwei.html">Das ist der Link 2</a>
<div id="contentdiv" style="background-color: #900; color: #fff;">Hier müsste der Inhalt stehen</div>
<div id="contentdiv2" class="inhaltdiv" style="background-color: #060; color: #fff;">Hier müsste der Inhalt 2 stehen</div>
</body>

so sieht der body-tag bei mir aus.... ist das falsch? -> wie müsste es sein?




Ich wäre euch / dir für eine Antwort wirklich dankbar, wenn ich sage einem Link eine ID oder Class zuweisen, dann denke ich daran:

<a href="ordner/seite.html" class="linkclass">Text</a>
oder
<a href="ordner/seite.html" id="linkid">Text</a>

ist denn das / der body tag oben falsch?

-----------------------------------------------------------------

Mein Ziel wäre es ja, dass ein Link, im einen DIV den inhalt lädt,
und der andere Link im anderen DIV... und das so mit einer ID / Class auf dem Link "auswählen" kannst, wo es geladen werden soll...

-----------------------------------------------------------------

vielen vielen dank für eure antworten!!

 

[elyion_g2]

AW: Url-Standard erstellen

auf www.hydremag.ch/noiframe funktioniert der link für den 2ten div.
der für den ersten aber nicht.... aber genau das wäre ja dass was ich können müsste. nur alleine der erste funktioniert...

 

[elyion_g2]

AW: Url-Standard erstellen

Kann mir wirklich niemand mehr helfen? Ich würde ja nicht fragen, wenn ich alleine weiter käme ...

 

[kyle66]

AW: Url-Standard erstellen

Du musst im ajaxpage-Aufruf die Anführungsstriche weglassen

 ajaxpage(this.href,this.title);

Grüße
kyle