[JS] ALG - Softwareontwikkeling

dinsdag 3 juli 2007 23:47

Acties:

Topicstarter

Ik heb hier al enkele keren mijn hoofd over gebroken, en heb trouwens ook al eens een topic hier geopend over dit onderwerp, maar helaas heb ik nog geen enkele succesvolle poging gehad om mijn doel te bereiken.

Het probleem is dat ik het automtisch het huidige weer wil tonen op een website. Echter de enige "graits" manier die ik had gevonden is door een javascript-bestand aan te roepen, dat met document write een klein stukje HTML schrijft met document.write op de plaats waar ik het aanroep.

Het eerste probleem: dat ik de HTML totaal niet kan bewerken heb ik nu voledig omzeild.
Het tweede probleem: dat ik het weer alleen wil aanroepen als een bepaalde waarde "true" is heb ik nog niet voor elkaar gekregen.

Ik heb op internet van allerlij methodes opgezocht om een SCRIPT element te maken met javascript en dan een src eraan toevoegen, maar ik krijg het niet geexecute in de meets gevallen, werkt het wel dan veegt hij mijn hele pagina weg.

Echter doordat ik mijn eerste probleem nu volledig heb opgelost denk ik dat ik ook een oplossing voor het tweede probleem heb voorbereid. In plaats van rechtstreeks het weer-javascriptje aan te roepen, probeer ik nu mijn HTML pagina aan te roepen die alle voorbereidende werk al heeft gedaan.

Met een IFRAME werkt het in principe dus, maar enkel IE laat mij toe om geen achtergrond te hebben, wat wel goed uitkomt, omdat de IFRAME op een gradient staat. Voor andere browsers moet ik dus een andere oplossing vinden, en liefst heb ik dezelfde oplossing voor ie, ff, en op.

Mijn idee is nu om de IFRAME totaal te verbergen, en dan de 2 gegevens eruit te extraheren, ik bereik echter niet de IFRAME.innerHTML. Ik twijfel ook aan een popup, die eigenlijk niet opent, of meteen sluit, maar dat is het nog moeilijker maken dan het moet.

Hebben jullie een idee hoe ik met een IFRAME waarin ik de volgende pagina inlaadt, de inhoud van "meteo" kan extraheren?

De volgende HTML code zal wel van pas komen om mij te helpen denk ik:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Het weer</title>
<style type="text/css">
html
    {
    overflow: hidden;
    }
body
    {
    margin: 0;
    border: 0;    
    }
#meteo
    {
    position: relative;
        width: 115px;
        height: 60px;
    background-color: #000;
    }
#meteo img
    {
    height: 80%;
    padding: 0;
    margin: 0;
    }
#meteo div 
    {
    position: absolute;
        bottom: 0;
        right: 0;
    font:35px georgia;
    color: #0cf !important;
    }
#meteo td
    {
    display: none;
    }
</style>
<script type="text/javascript">
function loadmeteo()
    {
    o_meteo = document.getElementById('meteo')
    lucht = o_meteo.getElementsByTagName('img')[2].src
    temperatuur = o_meteo.getElementsByTagName('b')[1].innerHTML
    o_meteo.innerHTML ='<img src="' + lucht + '">' + '<div>' + temperatuur + '<\/div>'
        var o_temp = o_meteo.getElementsByTagName('div')[0]
        o_temp.style.color = "#fff"
        o_temp.style.filter = "progid:DXImageTransform.Microsoft.Glow(color: blue)"
    }
</script>
<body onload="loadmeteo()">
<h1>Het weer</h1>
<div id="meteo"><script type="text/javascript" src="http://home.weeronline.com/cgi-bin/nph-h?WMO=06436&amp;PLZN=Voerstreek&amp;L=nl"></script></div>
</body>
</html>

Een andere oplossing dan iframe is uiteraard ok welkom
Hebben jullie bijvoorbeeld een idee hoe ik de de SRC van het SCRIPT kan laden als een bepaalde voorwaarde TRUE is zonder de hele pagina weg te vegen. PS: test AUB eerst je oplossing, want meestal werkt het niet zoals ik verwacht (ik heb al veel geprobeerd)

(ik hoop dat ik een goede topicstart heb gemaakt?)

EDIT: ( HTML valid code gepost )

[ Voor 5% gewijzigd door een moderator op 04-07-2007 00:15 . Reden: ff code tags geenabled :) ]

http://www.softfocus.be/

woensdag 4 juli 2007 08:49

Acties:

wizzkizz

smile...tomorrow will be worse

Je kunt de grootte van de iframe op 0 pixels zetten, zodat het iframe sowieso niet zichbaar is.
Echter, een andere oplossing is gebruikmaken van [buzzword alert]ajax.
Dit houdt ongeveer in dat je op de achtergrond de gewenste pagina ophaalt (dus de pagina die het voorbereidende werk heeft gedaan), die je dan kunt verwerken op de manier die jij wilt.
Als je toch een javascript oplossing gebruikt is dit denk ik een nettere methode dan wat jij nu probeert met die iframes.

Hier op het forum is veel info te vinden over dit onderwerp.

[edit]
nog een opmerking over je js: in principe moeten je regels code afgesloten worden met een ; (punt-komma)

[ Voor 9% gewijzigd door wizzkizz op 04-07-2007 08:51 ]

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

woensdag 4 juli 2007 11:04

Acties:

Fibbers

Binnen dat script wat je aanroept ergens anders, wordt er veel document.write en document.writeln gebruikt.

Gebruik je die statements tijdens de opbouw van je pagina direct binnen <script> tags (dus niet binnen <script src=...> tags), dan gaat dat wel goed.

Anders dus niet, want document.write zorgt ervoor dat er een 'document' geschreven wordt, een nieuw document zeg maar

.

Dit is wel lelijk, maar werkt wel: als je ervoor zorgt dat de document.write en document.writeln functies net iets anders werken, zou et wel moeten lukken. Bijvoorbeeld dat ze de inhoud niet direct schrijven naar het scherm, maar naar een variabele, dus zoiets moet et dan worden in totaal:

JavaScript:

...
</style>
<script type="text/javascript">
var sToWrite = '';
document.write=function(s){sToWrite += s;};
document.writeln=document.write;

function loadmeteo()
    {
    o_meteo = document.getElementById('meteo')
    o_meteo.innerHTML = sToWrite;
    lucht = o_meteo.getElementsByTagName('img')[2].src
    temperatuur = o_meteo.getElementsByTagName('b')[1].innerHTML
    o_meteo.innerHTML ='<img src="' + lucht + '">' + '<div>' + temperatuur + '<\/div>'
        var o_temp = o_meteo.getElementsByTagName('div')[0]
        o_temp.style.color = "#fff"
        o_temp.style.filter = "progid:DXImageTransform.Microsoft.Glow(color: blue)"
    }
</script>
<script type="text/javascript" src="http://home.weeronline.com/cgi-bin/nph-h?WMO=06436&amp;PLZN=Voerstreek&amp;L=nl"></script>
<body onload="loadmeteo()">
<h1>Het weer</h1>
<div id="meteo"></div>
</body>
</html>

woensdag 4 juli 2007 11:52

Acties:

Verwijderd

Lijkt mij allemaal wat omslachtig. Ik weet niet of je gebruik kan maken van enkele webprogrammeertalen zoals PHP of ASP(.net). Als je dat kan zou ik een script schrijven die van bepaalde websites waar weerinformatie te vinden is de XML en/of de HTML uitlezen. Maak je gewoon een base klasse en leidt je daaruit concrete implementaties af zoals "hetweernlController" enzovoort.

Vervolgens laat je dat script een output in XML , JSON of HTML teruggegeven aan de hand van parameters die je via GET of POST aan je eigen script geeft. Volgens mij ben je dan al klaar.

Heb je geen iframes, lastige javascript, enzovoort nodig

Maarja erg ontopic is het niet maar wellicht een ander perspectief.

woensdag 4 juli 2007 11:55

Acties:

Alex)

HTML:

<html>
<body>
<h1>Welkom op mijn site!!!!</h1>
<script type="text/javascript">

if(iets_is_waar)
{
  document.write('<div id="meteoOuterDiv">');
  document.write('<scr'+'ipt src="http://pad/naar/je/js/file" type="text/javascript"></scr'+'ipt>');
  document.write('</div>');


  var mDiv = document.getElementById('meteoOuterDiv');
  alert(mDiv.innerHTML);
}
</script>

<h2>Doei!</h2>
</body>
</html>

Dit zou moeten werken afaik...

[ Voor 20% gewijzigd door Alex) op 04-07-2007 11:58 . Reden: TS niet helemaal gelezen... ]

We are shaping the future

woensdag 4 juli 2007 12:05

Acties:

g4wx3

Topicstarter

@Fibbers
Super bedankt! deze functie werkt perfect, dat het lelijk is neem ik er bij.
@Micheltje15
Ik had daar ook al over gedacht, maar ik wist niet zeker of dat een javascriptje word geparsd als het word aangeroepen via php. Daarom dat ik er eigenlijk niet verder ben over na gaan denken.
@wizzkizz
Ik denk dat jou manier ook wel zou gewerkt hebben zonder probleem, maar ik heb nog niet de tijd gehad om iets uit te proberen, en ik hab nu een afdoende oplossing, toch bedankt!

edit:
@Alex)
Dat ik ook eerst, echter werkt dat niet

edit2:
Eigenlijk is de Fibbers-oplossing niet helemaal perfect, want het script word steeds aangeroepen, in een offline omgeving geeft dat een error, ik ga dus toch gaan voor de ajax oplossing, daarna mischien iets met php proberen te implementeren

[ Voor 23% gewijzigd door g4wx3 op 04-07-2007 12:17 ]

http://www.softfocus.be/

woensdag 4 juli 2007 12:25

Acties:

wizzkizz

smile...tomorrow will be worse

g4wx3 schreef op woensdag 04 juli 2007 @ 12:05:
...
edit2:
Eigenlijk is de Fibbers-oplossing niet helemaal perfect, want het script word steeds aangeroepen, in een offline omgeving geeft dat een error, ik ga dus toch gaan voor de ajax oplossing, daarna mischien iets met php proberen te implementeren

Je kunt ajax en php ook prima combineren, dat je php iets laat genereren op het moment dat je dat (met behulp van ajax-technieken) ophaalt en laat tonen. Zit je verder ook niet met lastige writeln's enzo.

enige nadeel is dat je afhankelijk ben van de bereidheid van de bezoekers om javascript uit te voeren. Maar voor >95% van de internetters zal dat geen probleem zijn.

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

woensdag 4 juli 2007 12:32

Acties:

Alex)

g4wx3 schreef op woensdag 04 juli 2007 @ 12:05:

edit2:
Eigenlijk is de Fibbers-oplossing niet helemaal perfect, want het script word steeds aangeroepen, in een offline omgeving geeft dat een error, ik ga dus toch gaan voor de ajax oplossing, daarna mischien iets met php proberen te implementeren

Zet er boven:

JavaScript:

1
2

try
{

En eronder:

JavaScript:

1	} catch(e) {}

Op die manier vang je fouten af, niet een nette manier (voor debugging), wel netjes voor je bezoekers

We are shaping the future