| Schrijver |
Bericht |
vlerknozem
Hoofd-moderator
3929 posts |
# Geplaatst: 26 Mar 2008 00:36 · Aangepast door: vlerknozem
Omdat er veel beginners gebruik maken van iframes om de rede dat ze niet elke pagina structuur willen aanpassen voor bijvoorbeeld een kleine aanpassing van het menu, en niet iedereen gebruik wil of kan maken van php, ben ik een gaan scripten.
Dit script include een pagina en plaatst de content in een div.
Ook werkt dit met ?p=paginaNaam
Opmerking
Iedereen die dit wil gebruiken doet dit op eigen risico. Ik weet niet of dit namelijk veilig is.
Als iemand dit script kan verbeteren, afkeuren, of andere opmerkingen heeft dan hoor ik dat graag.
javascript code/*
* Copyright mijn fiets, 2008, GNU General Public License
* GEBRUIK:
* voorbeeld url: "http://voorbeeld.nl/index.html?p=waarde
* In de functie aanLaad() moet u de 'p' ( in PAGE.uitlezen("p") ) veranderen
* in wat u wil. In de 'if-else' statement kunt u meerdere argumenten plaatsen.
*
* Om een bestand te includen vanaf de functie aanLaad:
* include('path/to/file', 'divID');
*
* Om een bestand te include vanaf een willekeurige plek:
* in een script tag: include('path/to/file','this.id');
*/
function aanLaad() {
if(PAGE.uitlezen("p") == 'fiets') {
include('./ubuntu',"a");
} else {
include('./aap.html',"a");
}
}
// HIERONDER NIET AANPASSEN
function include(url,dbox){
var pageRequest = false
/*@cc_on
@if (@_jscript_version >= 5)
try {
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try {
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e2){
pageRequest = false
}
}
@end
@*/
if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest()
if (pageRequest){
pageRequest.open('GET', url, false)
pageRequest.send(null)
embedpage(pageRequest,dbox)
}
}
function embedpage(request,dbox){
if (window.location.href.indexOf("http")==-1 || request.status==200)
document.getElementById(dbox).innerHTML=request.responseText;
}
var PAGE={
uitlezen:function(id){
var s=location.search.match('(?:\\?|\&)'+id+'=([^\&]*)');
return s?unescape(s[1].replace(/\+/g," ")):false}
}
html code<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Include functie javascript</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="javascript:aanLaad();">
<div id="a">Loading...</div>
</body>
</html>
|
| |
|
Henri van Werkhoven
Forum Lid
667 posts |
# Geplaatst: 26 Mar 2008 01:39
Ha Vlerknozem,
Mooi script, handig. Ik snap alleen je opmerking in de andere topic niet dat dit wel SEO-vriendelijk is. Hoe je het ook went of keert, het gedeelte wat je include, wordt door de Search Engine niet gezien. Want die voert geen javascript uit. Als dit de content is (zoals in jouw voorbeeld) heeft de pagina geen inhoud, wat hem minder relevant maakt. En zoals gezegd: geen menu is ook niet handig ivm doorlinken van de SE.
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 26 Mar 2008 01:57 · Aangepast door: wadelft
Bedankt voor je sript vlerk maar bij mij werkt ie (nog) niet ...
Hij kan het path niet vinden en dat heb ik wel aangepast.
( ps :mooier zou zijn als het path in de markup gezet kan worden )
Zal morgen nog een proberen : zal wel iets met (p) te maken hebben
Ik had ook ooit eens hier wat geplaatst : kan meerder inladen omdat
er een buer que inzit.
http://82.156.236.62/ajax/ajax_4c.htm
Edit : eerder melde ik , werkt nog niet..
Maar het werkt prima hoor , ik had het pad met bakslash ( \ ) gezet
en dat moet slash (/) zijn ..
Leuke toepassing !!!
|
DNA
Forum Lid
7709 posts |
# Geplaatst: 26 Mar 2008 09:48
Quoting: Henri van Werkhoven Mooi script, handig. Ik snap alleen je opmerking in de andere topic niet dat dit wel SEO-vriendelijk is.
Dit omdat elke pagina een link heeft en niet zoals de meeste ajax scripts alleen 1 link.
Dus een pagina heet pagina.php?p=over-ons
En dat wordt dan ingeladen.
mooi scriptje vlerk!
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 26 Mar 2008 10:16
Quoting: DNA Dit omdat elke pagina een link heeft en niet zoals de meeste ajax scripts alleen 1 link.
Dus een pagina heet pagina.php?p=over-ons
3x gelezen maar dit snap ik niet ...
een link en de ander OOK een link ???
|
DNA
Forum Lid
7709 posts |
# Geplaatst: 26 Mar 2008 10:25 · Aangepast door: DNA
bij de meeste ajax sites he je maar 1 pagina waarbij als je op een link klikt het met javascript ingeladen wordt.
alleen de content veranderd.
maar bij dit scriptje staan alle pagina's al geindexeerd.
Dus wanneer je op een link klikt, krijg je als url ook werkelijk pagina.php?p=pagina.
oftewel, het is goed voor SEO.
handige hieraan is ook dat je een url aan iemand kan geven van de pagina die je wilt, dat kan meestal ook niet met ajax sites.
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 26 Mar 2008 16:20 · Aangepast door: wadelft
@Dna bedankt voor je antwoord - maar ik snap het nog niet
helemaal - omdat het wat offtopi is zal ik wel eens een nieuwe tread openen.
( Kennelijk te laat naar bed gegaan want ik ben er nog niet geheel
bij haha )
Ook dat vlerk.htm?p=pagina wil bij mij niet werken ! ???
Wat is fiets en wat is waarde ?
Ik krijg steeds een dubbel path van s terug ??
Vlerk gaf een voorbeeld ( http://voorbeeld.nl/index.html?p=waarde) maar
ook die werkt niet .
Weet iemand waar ik fout ga ??
|
duwgati
Forum Lid
347 posts |
# Geplaatst: 26 Mar 2008 17:23
Ik weet niet waar je de fout in gaat, maar misschien kom je er wel uit met het voorbeeld op javascriptkit.
Hier wordt alleen geen dynamische pagina geladen, maar is het een vaste pagina die op een specifieke positie wordt geladen. De oplossing van Vlerknozem voegt hieraan wel de mogelijkheid toe om dynamisch externe pagina's te laden.
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 26 Mar 2008 18:04
Quoting: duwgati De oplossing van Vlerknozem voegt hieraan wel de mogelijkheid toe om dynamisch externe pagina's te laden.
Daar gaat het juist om : dat wil bij mij niet werken.. probeer het straks nog
wel eens !
Werkt het bij ieder ander wel ??
|
vlerknozem
Hoofd-moderator
3929 posts |
# Geplaatst: 26 Mar 2008 18:08
javascript codefunction aanLaad() {
if(PAGE.uitlezen("p") == 'fiets') {
include('./ubuntu',"a");
} else {
include('./aap.html',"a");
}
}
Als ?p=fiets in de url wordt gebruikt, dan wordt in dit geval de content van './ubuntu' in de div met het id 'a' geladen.
Bij mij werkt het. Ik heb de javascript voor de zekerheid nog een keer getest, en toch werkt het bij mij.
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 26 Mar 2008 19:02 · Aangepast door: wadelft
Aha dus de toevoeging is niet variabel . Daar ging ik fout ;ik verwahte
dat wat er ahter p= staat dat dat geladen werd !
dus zo :
js code
function aanLaad() {
var extern=PAGE.uitlezen("p");
// window.status=(PAGE.uitlezen("p"));
// alert(extern);
if( extern == false) {
include('test/tf2.htm',"a");
} else {
include(extern,"a");
}
}
zodat ieder file nu meegegeven kan worden bv
http://82.156.236.62/ajax_vlerk/vlerk.htm?p=div_show.htm
http://82.156.236.62/ajax_vlerk/vlerk.htm?p=blok.htm
o zonder P:
http://82.156.236.62/ajax_vlerk/vlerk.htm
maar dat was dus niet zo...
|
Henri van Werkhoven
Forum Lid
667 posts |
# Geplaatst: 27 Mar 2008 00:40
Mooie toevoeging. Zo wordt het script flexibel. En hoef je dus niet je javascript file aan te passen als je de site uitbreidt.
Toch nog even over het SEO: ik snap dat elke pagina via de unieke link gevonden kan worden, dat is inderdaad goed. Maar als ik nu in google ga zoeken naar info over apen, kom ik dan ooit op jouw site terecht? Nee, want de google bot laadt niet de content over de aap. Omdat het daarvoor javascript zou moeten gebruiken. Dat bedoelde ik met SEO-onvriendelijk. Of zie ik het nu helemaal verkeerd?
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 27 Mar 2008 01:45 · Aangepast door: wadelft
Quoting: Henri van Werkhoven Nee, want de google bot laadt niet de content over de aap. Omdat het daar voor javascript zou moeten gebruiken
Dat zal de reden zijn dat ik DNA zijn betoog niet kon volgen , mogelijk
hebben we het beiden mis ??
Maar als er een (evt. hidden) link op de pagina staat zal de bot die wel
volgen en wordt geindexeerd.
Doe je niks zal die zonder de bijbehoorende parent vanuit google starten
en is je pagina inkompleet.
Maar een klein javascriptje in de include , bv dit :
js code
<BODY>
<script type="text/javascript">
onload=function(){
if (parent == self){
location.href= "vlerk.htm?p=" + self.location.href;
// verander "vlerk.htm" in de pad/naam van jouw index file !!!
// dus bv
// location.href= "index.htm?" + self.location.href;
}
}
</script>
direkt na de <body> zal hem weer keurig in de parent laden ,kijk maar:
http://82.156.236.62/ajax_vlerk/blok2.htm
In vlerks oorspronkelijke opzet zal dat niet lukken omdat het pad daar
hard coded is...
Dan bedenk ik zo :
Maar wel zou je dan bv 'fiets' als een password kunnen vragen waarmee
je inlude te beveiligen is.. ? Omdat een inlude niet te listen is en je het
pad nog niet weet zou dat moeten lukken ??
@EDIT ehhh.. nee dus want hij is natuurlijk wel te downloaden ..
(sorry mbrains are gone haha)
|
vlerknozem
Hoofd-moderator
3929 posts |
# Geplaatst: 27 Mar 2008 09:52
Dat ziet er wel goed uit Wadelft.
Maar even over het SEO. Google kijkt niet naar Javascript, maar dan zal de <noscript>tag wel aanslaan? Maar ja, oke dat heeft ook weinig zin. Misschien zowiezo een sitemap maken.
|
duwgati
Forum Lid
347 posts |
# Geplaatst: 27 Mar 2008 21:31 · Aangepast door: duwgati
Ik heb hier nog eens mijn gedachten over laten gaan, maar volgens mij heeft Henri gelijk met zijn opmerking dat voor een SE BOT de include file niet zichtbaar is.
Sterker nog, vanwege de links die nu ontstaan wordt de BOT op het verkeerde been gezet. De BOT zal de links volgen en komt dus nooit op die externe file terecht, behalve via de links die altijd vanaf de parent pagina vertrekken, en dan ziet ie de content van die include file dus niet.
Ik ben er dus nog eens ingedoken want het systeem vind ik op zich wel gaaf.
Ik heb wat aanpassingen gemaakt waarbij ik SE BOT vriendelijke links gebruik maar die herschreven worden op basis van een trigger mechanisme. Ik heb de title tag gebruikt om de links te herschrijven wanneer de title "Dynamic Content" is.
Een BOT zal de links volgen en op de individuele content pagina's terecht komen. Net als een gebruiker die javascript gedisabled heeft trouwens.
Alle andere gebruikers zien de dynamische content in de daarvoor bestemde div.
Hier een voorbeeldje... Voor het gemak heb ik alle code in 1 file gezet, kun je met view source alles ineens bekijken.
Ik heb alleen getest in FF en IE6, dus ik ben benieuwd naar resultaten op andere browsers.
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 27 Mar 2008 23:02
@Duwgati ; helaas werkt je link (nu) niet ...
Ben benieuwd naar je bijdrage....
|
duwgati
Forum Lid
347 posts |
# Geplaatst: 27 Mar 2008 23:05
Oops, foutje, dat was de lokale link. Maar hij is nu aangepast.
|
DNA
Forum Lid
7709 posts |
# Geplaatst: 27 Mar 2008 23:06
wat ik echt gaaf vind is dat iedereen meedenkt en meehelpt aan dit scriptje :)
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 28 Mar 2008 00:02 · Aangepast door: wadelft
@Dugatie : Dit is idd naar mijn idee een goede (en slimme!) SEO oplossing.
Alleen gaat het wel afwijken van het oorsponkelijke "vlerk" voorstel
waar ook de targetdiv flexibel was en die vanaf markup gekozen kon
worden.
Omdat dit nu Html aanroep is wordt dat wat moeilijk .
Mogelijk kan tzt een universeel geheel samengesteld worden , waar
ook de beginner goed mee overweg kan.
Voor ieder mag het duidelijk zijn dat de includes alleen html en txt bevatten.
Evt bijbehorende JS en CSS dient al in de parent opgenomen te zijn
Natuurlijk kan die - bij veel wisselende - inludes dynamish in de head
worden bijgeladen.
Een mogelijk funtie voor wie daar behoefte aan heeft :
js code
//--------------------
function loadobjs(){
//--------------------
// alert('loadedobjects!!\n' + loadedobjects);
if (!document.getElementById) return;
for (i=0; i<arguments.length; i++){
var file=arguments[i];
var fileref="";
//Check of al geladen is
if (loadedobjects.indexOf(file)==-1) {
if (file.indexOf(".js")!=-1){
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref);
loadedobjects+=file+" \n" //onthoud wanneer deze reeds geladen is
window.focus();
}}}
|
Henri van Werkhoven
Forum Lid
667 posts |
# Geplaatst: 28 Mar 2008 02:53
Dit is een slimme zet, duwgati!
Wat nu eigenlijk nog zou moeten gebeuren om het verhaal compleet te maken, is van de include pagina een valide html pagina maken (want daar houdt de SE-bot van) inclusief een javascriptje om je naar de goede pagina te leiden (voor wie jouw pagina vindt in Google). De "overbodige" code moet je er in de includes file weer uitknippen!
Bijv.
html code
<DOCTYPE ..(geen zin in zoeken)>
<html>
<head>
<title>Deze pagina gaat over apen</title>
<script type="text/javascript">
// haal van de location het deel voor de filenaam weg
file = location.href.replace(/^.+\//g, "");
location.href = "index2.html?" + file;
</script>
</head>
<body>
<h1>Apen</h1>
<p>Ik zeg niks</p>
</body>
</html>
js code
function embedpage(request,dbox)
{
// ik snap de eerste condition eigenlijk niet :$
if (window.location.href.indexOf("http")==-1 || request.status==200)
{
html = request.responseText;
// haal het eerste deel eraf
html = html.replace(/^.*<body>/, "");
// haal het laatste deel eraf
html = html.replace(/<\/body>.*$/, "");
document.getElementById(dbox).innerHTML=html;
}
}
Ik denk dat je op deze manier het meest SEO-vriendelijk bent. Het enige nadeel is nog dat op de includes pagina's het menu niet staat waardoor de bot alleen vanuit de indexpagina indexeert (hm, dat klinkt ook logisch he)
|
duwgati
Forum Lid
347 posts |
# Geplaatst: 28 Mar 2008 10:33 · Aangepast door: duwgati
Allebei mooie toevoegingen Wadelft en Henri. Het begint al langzaam aan een bijzonder fraaie oplossing te worden :D
@Henri, bedoel je dat je deze conditie niet snapt?
js codeif (window.location.href.indexOf("http")==-1 || request.status==200)
Hier staat eigenlijk: Als het script offline wordt gerund, of als de overdracht succesvol was (code 200) dan plaats de tekst.
@Wadelft, het probleem van die target div is met een kleine aanpassing makkelijk te verhelpen. Gewoon in de link een parameter meegeven, dus bijv. index.html?target=divID of alleen maar index.html?divID:
De SE-BOT en mensen zonder javascript komen nog steeds gewoon op de nieuwe pagina en de parameter wordt genegeerd.
Een kleine aanpassing van het script zorgt ervoor dat de dynamische content in de juiste div geladen wordt.
|
vlerknozem
Hoofd-moderator
3929 posts |
# Geplaatst: 28 Mar 2008 12:46
Dat lijkt me ook wel èen gpede toevoeging inderdaad. Zelf had ik dan nog deze toevoeging in gedachte:
javascript codefunction embedpage(request,dbox) {
// ik snap de eerste condition eigenlijk niet :$
if (window.location.href.indexOf("http")==-1 || request.status==200) {
html = request.responseText;
// haal het eerste deel eraf
html = html.replace(/^.*<body>/, "");
// haal het laatste deel eraf
html = html.replace(/<\/body>.*$/, "");
document.getElementById(dbox).innerHTML=html;
} elseif(!document.getElementById(dbox)) {
document.getElementByTagName('body').innerHTML += '<b>Error: Kon de content niet laden.<b>';
} else {
document.getElementById(dbox).innerHTML = '<b>Error: Kon de content niet laden.</b>';
}
}
Ook zou een laadbalkje leuk zijn. Eventueel met var laadbalkje = true; als configuratie.
|
duwgati
Forum Lid
347 posts |
# Geplaatst: 28 Mar 2008 14:50
Ik heb het stukje voor de variabele toewijzing van de target div toegevoegd, zie voorbeeld.
Enig probleem dat ik nu zie is dat de content weliswaar in verschillende divs geladen kan worden, maar hij begint wel altijd met de default html content. Dus de dynamische tekst van een eerder aangeklikte link wordt weer terug gezet op de default tekst.
@Vlerknozem, ik weet niet of het zinvol is om een foutmelding helemaal aan het eind van de pagina te schrijven (als target dbox niet gevonden kon worden). Dat hangt sterk van de lengte van je pagina af.
Mijn voorkeur zou denk ik uitgaan naar een alert.
|
Ivar
Forum Lid
939 posts |
# Geplaatst: 28 Mar 2008 14:52
klein foutje in je code, in js is de else in je if statement niet 'elseif' maar 'else if' ;)
|
vlerknozem
Hoofd-moderator
3929 posts |
# Geplaatst: 28 Mar 2008 15:50
Alert zou ook kunnen. @Ivar. bedankt. Ik ben van php gewend om het aan elkaar te schrijven :O
|
duwgati
Forum Lid
347 posts |
# Geplaatst: 28 Mar 2008 20:30 · Aangepast door: duwgati
En nog maar eens een nieuwe versie.
Dit script verwijdert de href attribuut en vervangt die door een onclick event met de parameters die de functie include nodig heeft.
Zo blijven aangeklikte links (dynamische content) zichtbaar totdat ze expliciet wordt overschreven door nieuwe content (via andere link).
SE Bots en gebruikers zonder JS worden nog steeds gewoon naar de URL in de href gestuurd.
<EDIT> ontdek net dat ie niet werkt in IE6. De DOM wordt wel herschreven, maar de links doen niets. Moet ik induiken.
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 28 Mar 2008 21:50 · Aangepast door: wadelft
@duwgati
helaas , in je laatste versie gaat het bij mij mis bij het omzetten van de
links , werkt het bij jullie wel hier vana deze site ????
EDIT Oeps : zie net dat je het al gezien hebt .
|
duwgati
Forum Lid
347 posts |
# Geplaatst: 28 Mar 2008 22:08 · Aangepast door: duwgati
Ja, ik had het gezien en inmiddels ook opgelost.
I.p.v. een onclick, zet ik de javascript functie nu in de href. Zo werkt het in FF en in IE6.
Bijkomend voordeeltje, zo zie je de nieuwe link ook in je status balk.
|
wadelft
Forum Lid
2720 posts |
# Geplaatst: 28 Mar 2008 22:22 · Aangepast door: wadelft
Ok onclick weg , href. + JS terug ! Dat werkt in ie6..
Verder : Mss moeten we ook eens de gedachten laten gaan over
het punt veiligheid.
Ikzel heb er nooit zo over nagedacht maar gebruikers dienen de evt (phishing - cross-domain ed) misbruik niet te vergeten ????
|
duwgati
Forum Lid
347 posts |
# Geplaatst: 28 Mar 2008 22:47
Elk nadeel heb zijn voordeel ;)
Het "mooie" van deze techniek is dat XSS injection geen thema is. Heel dat pageRequest gedoe werkt alleen maar als de te includen file op hetzelfde domain staat als waar het parent document staat. Zo strikt zelfs dat als je in http://www.mynsite.nl/index.html een document probeert te laden als http://mynsite.nl/include.html dan zal het niet werken. Het moet tot op de www. identiek zijn.
|
