Avatar billede annex Nybegynder
25. august 2009 - 16:59 Der er 9 kommentarer

Ajax Page Fetch eller lignende

Jeg har en webside hvorpå jeg har lavet en række faneblade i indholdsfeltet (der er overordnede menuer). I hvert faneblad er det meningen at jeg vil udstille indhold fra andre websider fra samme domæne. Mit site ligger i Obvius CMS.

Jeg har forsøgt at bruge Ajax Page Fetch til at hente indhold fra en underliggende webside til et af fanebladene - det fungerer sådan set fint, men jeg får hele siden med (inkl menuer o.s.v.) og jeg er kun interesseret i at få det indhold der ligger i div id="content" med.

Er der nogen der ved om det kan lade sig gøre og i så fald hvordan? Det behøver ikke være med Ajax Page Fetch, det kan også være et andet script.


/***********************************************
* Ajax Page Fetcher- by JavaScript Kit (www.javascriptkit.com)
***********************************************/

var ajaxpagefetcher={
loadingmessage: "Loading Page, please wait...",
exfilesadded: "",

connect:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
    var page_request = false
    var bustcacheparameter=""
    if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
        page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE6 or below
        try {
        page_request = new ActiveXObject("Msxml2.XMLHTTP")
        }
        catch (e){
            try{
            page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e){}
        }
    }
    else
        return false
    var ajaxfriendlyurl=pageurl.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
    page_request.onreadystatechange=function(){ajaxpagefetcher.loadpage(page_request, containerid, pageurl, jsfiles, cssfiles)}
    if (bustcache) //if bust caching of external page
        bustcacheparameter=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    document.getElementById(containerid).innerHTML=ajaxpagefetcher.loadingmessage //Display "fetching page message"
    page_request.open('GET', ajaxfriendlyurl+bustcacheparameter, true)
    page_request.send(null)
},

loadpage:function(page_request, containerid, pageurl, jsfiles, cssfiles){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
        document.getElementById(containerid).innerHTML=page_request.responseText
        for (var i=0; i<jsfiles.length; i++)
            this.loadjscssfile(jsfiles[i], "js")
        for (var i=0; i<cssfiles.length; i++)
            this.loadjscssfile(cssfiles[i], "css")
        this.pageloadaction(pageurl) //invoke custom "onpageload" event
    }
},

createjscssfile:function(filename, filetype){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    return fileref
},

loadjscssfile:function(filename, filetype){ //load or replace (if already exists) external .js and .css files
    if (this.exfilesadded.indexOf("["+filename+"]")==-1){ //if desired file to load hasnt already been loaded
        var newelement=this.createjscssfile(filename, filetype)
        document.getElementsByTagName("head")[0].appendChild(newelement)
        this.exfilesadded+="["+filename+"]" //remember this file as being added
    }
    else{ //if file has been loaded already (replace/ refresh it)
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
    var allsuspects=document.getElementsByTagName(targetelement)
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
      if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
      var newelement=this.createjscssfile(filename, filetype)
      allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
      }
        }
}
},


pageloadaction:function(pageurl){
    this.onpageload(pageurl) //call customize onpageload() function when an ajax page is fetched/ loaded
},

onpageload:function(pageurl){
//do nothing by default
},

load:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
    var jsfiles=(typeof jsfiles=="undefined" || jsfiles=="")? [] : jsfiles
    var cssfiles=(typeof cssfiles=="undefined" || cssfiles=="")? [] : cssfiles
    this.connect(containerid, pageurl, bustcache, jsfiles, cssfiles)
}

} //End object
Avatar billede olebole Juniormester
25. august 2009 - 21:37 #1
<ole>

Det lyder som en overordentlig bøvlet løsning. Hvorfor lægger du ikke bare indholdet ind i fanebladene? Det er jo under samme domæne  =)

/mvh
</bole>
Avatar billede annex Nybegynder
26. august 2009 - 10:33 #2
Ja, det ville være den logiske løsning:-) Men det er lidt mere kompliceret end som så. De sider jeg gerne vil have vist indhold fra har autogenereret indhold som løbende ændres. Derfor kan jeg ikke bare lægge indholdet ind i fanebladene.
Avatar billede olebole Juniormester
26. august 2009 - 11:07 #3
Jo, det burde ikke være noget problem. Der er noget, som skriver indholdet der, hvor det vises nu. Samme 'noget' må kunne sættes ind i fanebladene. Du komplicerer blot tingene endnu mere ved den løsning, du prøver at drible frem mod i øjeblikket  =)
Avatar billede annex Nybegynder
26. august 2009 - 11:16 #4
De lister jeg vil trække indhold fra har en masse funktioner/indstillingsmuligheder hvor man kan vælge hvilket indhold man vil have vist på siderne. Jeg kan ikke umiddelbart hive al denne funktionalitet ind i fanebladene (og slet ikke bevare det admin-brugerinterface siderne har for at udvælge/redigere indhold). Derfor er jeg ude efter en løsning hvor jeg kan vælge at hive indholdet fra en bestemt DIV på disse lister ind i fanebladene. Listerne som jeg vil trække indhold fra skal fortsat kunne redigeres af en ikke-kodekyndig redaktør så det er bedst at de bliver hvor de er.
Avatar billede olebole Juniormester
26. august 2009 - 11:32 #5
Hvergang, der rettes i indholdet, skal dit JavaScript alligevel skrives om. Du er igang med en rigtig skidt løsningsmodel
Avatar billede annex Nybegynder
26. august 2009 - 12:15 #6
Du må meget gerne uddybe for umiddelbart giver det ikke mening at jeg skal rette i koden hver gang siden opdateres?

Koden jeg har indsat fungerer som sådan fint og indholdet vises opdateret. Eneste problem er, at jeg får hele siden trukket med ind (med menuer etc.) og jeg er kun interesseret i at få trukket div id="content" ind. Jeg vil gerne høre fra folk der har et
reelt løsningsforslag - eller kan forklare hvorfor det ikke kan lade sig gøre.

Det er ikke en mulighed her at lægge indholdet direkte ind i fanebladene - ellers havde jeg naturligvis gjort det fra starten.
Avatar billede olebole Juniormester
26. august 2009 - 16:21 #7
Jo, det giver rigtig god mening  =)

Jeg er sådan set ikke i tvivl om, hvad det er, du gerne vil - eller om, hvad man kan og ikke kan. Det er jo præcis derfor, jeg ved, det er en dårlig løsning.

Du skal have lavet en HTML-parser i RegExp, som kan finde start tagget dit div med id="content". Dernæst skal den finde det rigtige slut tag.
Til slut skal den så finde alle elementer derimellem - inklusiv indhold - og indsætte disse i dokumentets DOM.
Avatar billede annex Nybegynder
26. august 2009 - 20:17 #8
Hmm ja, det var sådan noget jeg var bange for at skulle ud i - håbede bare det kunne gøres lidt mere simpelt. Du har vel ikke tilfældigvis et bud på en bedre løsning der ikke indebærer at jeg skal lægge indholdet direkte i fanebladene. Jeg kan ikke se andet end at jeg er nødt til at trække det fra de eksisterende kilder.
Avatar billede olebole Juniormester
26. august 2009 - 20:51 #9
Ikke rigtig
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester