Avatar billede netspinner Nybegynder
25. maj 2005 - 13:39 Der er 41 kommentarer og
2 løsninger

body onload skal referere til eksternt javascript

Hej,
Jeg har kodet et JavaScript og har det liggende i en ekstern fil (slideshow.js). Problemet er at det skal kaldes ved body onload i HTML-filerne - dvs. alle HTML-filer skal have reference til javascriptet, så det er nemt at vedligeholde fremover.

Når javascriptet er direkte i HTML-dokumentet kaldes funktionen således: <body onload=runSlideShow()>

Hvordan rettes det til at kalde det i en ekstern fil?

På forhånd tak.
Avatar billede busschou Praktikant
25. maj 2005 - 13:43 #1
Du skal hive det ind i din head ala
<script src="xxx.js"></script>
Avatar billede misbruger Nybegynder
25. maj 2005 - 13:43 #2
indsæt...

<script src="slideshow.js"></script>

i headeren af alle dine filer... :)
Avatar billede busschou Praktikant
25. maj 2005 - 13:44 #3
Så svarer det til at det står i headeren...og du kan derved kalde funktioonen i din body onload
Avatar billede busschou Praktikant
25. maj 2005 - 13:45 #4
misbruger >> 2sekunder der :P
Avatar billede busschou Praktikant
25. maj 2005 - 13:45 #5
Du kan evt læse mere om det her
http://www.w3schools.com/js/js_whereto.asp
Avatar billede misbruger Nybegynder
25. maj 2005 - 14:00 #6
He he jeg syntes også den var lidt langsom om at poste da jeg submitted mit svar ;)
Avatar billede netspinner Nybegynder
25. maj 2005 - 14:03 #7
Tak for jeres svar, men det løser ikke problemet.
Jeg ved godt hvordan jeg kalder scriptet - men det er body onload der skal initiere funktionen i det eksterne script :-)
Avatar billede netspinner Nybegynder
25. maj 2005 - 14:05 #8
Altså noget a la <body onload=runSlideShow() FROM slideshow.js>
Avatar billede busschou Praktikant
25. maj 2005 - 14:06 #9
nej ikke noget from
<head>
<script src="slideshow.js"></script>
</head>
<body onload="runSlideShow();">
</body>
Avatar billede netspinner Nybegynder
25. maj 2005 - 14:07 #10
Ved jeg godt, det var bare pseudokode ;)
Nuvel, prøver lige igen...
Avatar billede busschou Praktikant
25. maj 2005 - 14:08 #11
måske skal der en type med for en god ordens skyld

<head>
<script type="text/javascript" src="slideshow.js"></script>
</head>
<body onload="runSlideShow();">
</body>
Avatar billede busschou Praktikant
25. maj 2005 - 14:09 #12
eller måske ikke type...måske language="javascript" ..
Altså så den ved at det er javascript som er i filen :o)
Avatar billede busschou Praktikant
25. maj 2005 - 14:09 #13
Avatar billede misbruger Nybegynder
25. maj 2005 - 14:14 #14
netspinner... det kan du simpelthen ikke... nej det kan ikke lade sig gøre... glem det... nix... nul... og... nej...
Du SKAL inkludere scriptet som busschou skriver.
Avatar billede netspinner Nybegynder
25. maj 2005 - 14:25 #15
Jeg får fejl "Fejl: Et objekt var ventet" - og så refererer den til <body onload="runSlideShow()"> - den ved ikke at den skal finde funktionen runSlideShow i det eksterne script.
Avatar billede busschou Praktikant
25. maj 2005 - 14:28 #16
jo den ved for den er loadet i din head jo.... prøv smid din kode herind
Avatar billede busschou Praktikant
25. maj 2005 - 14:29 #17
hvordan ser din fil ud?
Din .js fil skal jo så _kun_ indeholde javascript kode..og ikke <script> tags mm!
Avatar billede netspinner Nybegynder
25. maj 2005 - 14:34 #18
Her følger HTML-filen - .JS-filen indeholder ingen <script> tags...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>&Oslash;koG&aring;rden</title>

<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="slideshow.js"></script>

<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() {
  var divs=document.getElementsByTagName("div");
    for (i=0;i<divs.length;i++){
      if (divs[i].className=="top") {
          divs[i].onmouseover=function() {
            this.firstChild.nextSibling.className="on";
            }
          divs[i].onmouseout=function() {
            this.firstChild.nextSibling.className="off";
            }
        }
    }
}
//-->
</script>



</head>
<body onload=runSlideShow()>

<center>
<div id="title_tbl">
        <a href="index.htm"><img src="" name=SlideShow

alt="&Oslash;koG&aring;rden - p&aring; nettet" class="billede" border=0></a>
<h1 id=t1>&Oslash;koG&aring;rden</h1>
<div id="t2">
... din &oslash;kologiske partner!
</div>
</div>

<div id="all">
<table> <!-- Menu indeholdt i tabel -->
<tr>
<td>
<center>
<div id="menu">
<div class="top">
  Om g&aring;rden
  <div class="skjult">
            <div class="menup"

onmouseover="style.backgroundColor='lightgreen';"

onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a

href="historie.htm">Historie</a></div>
        <div class="menup"

onmouseover="style.backgroundColor='lightgreen';"

onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><img

src="grafik/ansigt.bmp" border=0>&nbsp;&nbsp;&nbsp;<a

href="medarbejdere.htm">Medarbejdere</a></div>
        <div class="menup"

onmouseover="style.backgroundColor='lightgreen';"

onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a href="job.htm">Job hos

os?</a></div>
  </div>
</div>

<div class="top">
  Produkter
  <div class="skjult">
    <div class="menup" onmouseover="style.backgroundColor='lightgreen';"

onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a

href="produkter.htm">Vores produkter</a></div>
</div>
</div>

<div class="top">
  V&aelig;rd at vide
  <div class="skjult">
    <div class="menup" onmouseover="style.backgroundColor='lightgreen';"

onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a href="oekologi.htm"

>L&aelig;s om &oslash;kologi</a></div>
        <div class="menup"

onmouseover="style.backgroundColor='lightgreen';"

onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><img

src="grafik/telefon.bmp" border=0>&nbsp;&nbsp;&nbsp;<a href="kontakt.htm">Kontakt

os</a></div>
  </div>
</div>
</td>
</tr>
</table> <!-- Slut tabel for menu -->

<!-- Indholdet -->
<table width="430px">
<div id="txt">
  <b>&Oslash;koG&aring;rdens medarbejdere</b><p>
info følger her..</p>
</div>
</table> <!-- Slut tabel for indhold -->
</div>
</div>
</table>
</center>
</body>
</html>
Avatar billede netspinner Nybegynder
25. maj 2005 - 14:36 #19
BARE GLEM DET - Jeg løste det nu med en omstrukturering! :-)
I får begge point
Avatar billede busschou Praktikant
25. maj 2005 - 14:37 #20
nå ok så...
Avatar billede netspinner Nybegynder
25. maj 2005 - 15:11 #21
Damn... det løste det ikke helt. Problemet er, hvis I kigger på den listede kildekode, at jeg også har et javascript for en menu direkte i koden - og den skal der ikke linkes til i en ekstern fil. Desværre kan kun det eksterne script indlæses. Bevæger jeg markøren henover de punkter der defineres som en menu, ruller der ikke en liste ned :-/ Altså kun det ene script initialiseres.

Kender I en teknik til at løse det? Jeg giver glædeligt nogle flere point i en anden tråd jeg kan oprette... :-D
Avatar billede busschou Praktikant
25. maj 2005 - 15:18 #22
1)
I denne:
<script language="JavaScript" src="slideshow.js"></script>
Der skal du sikre dig stien er korrekt til dit slideshow.js
2)
Denne her
<body onload=runSlideShow()>
Skal være
<body onload="runSlideShow();">
3)
Der er intet i vejen for at have såvel eksterne som interne scripts i ens kode!
Avatar billede netspinner Nybegynder
25. maj 2005 - 15:32 #23
Slideshowet kører fint, og jeg har rettet det til <body onload="runSlideShow();"> - virker stadig ikke... er snart ved at rive mig selv i håret over dette.
Avatar billede busschou Praktikant
25. maj 2005 - 15:53 #24
Så vidt jeg kan se beder du heller ingen steder om at der skal rulle noget ned... ellers må du vise mig konkret hvor du gør det?
Jeg kan kun se at du sætter baggrundsfarve ved onmouseover og onmouseout
Avatar billede busschou Praktikant
25. maj 2005 - 15:57 #25
ellers er der noget jeg har misforstået?
Jeg kan se at du prøver lave noget med at sætte div.onmouseover ... men det tror jeg ikke man kan.. det virker hverken på den ene eller anden måde hos mig i hvert fald
Virkede det før ??
Avatar billede netspinner Nybegynder
25. maj 2005 - 16:00 #26
Det med farverne er til menuen... den bliver vist og skjult. Det virkede selvfølgelig før.
Avatar billede netspinner Nybegynder
25. maj 2005 - 16:02 #27
Du får lige koden til style.css - så kan du try it out :-)

#t1 {
    position: relative;
    font-style: italic;
    font-weight: bold;
    font-size: 4em;
    font-family: Times New Roman, serif;
    top: -0.17em;
    /*color: #99cccc;*/
    color: green;
}

#t2 {
    position: relative;
    font-size: 1em;
    font-family: Arial, sans-serif;
    top: -2.8em;
    left: 8em;
    letter-spacing: 3px;
    color: #336666;
}

a {
color: black;
}

a:visited {
color: black;
}

p {
    text-align: justify;
}

#menu {
position: relative;
width: 500px; height: 83px;
left: 226px;
}

#title_tbl {
width: 720px;
/*background-color: lightgreen;*/
}

#all {
position: relative;
width: 718px;
height: 300px;
background-color: rgb(240, 240, 240);
border: dotted lightgreen 1px;
}

#txt {
font-family:Verdana;font-size:11px;
}

.top {font-family:Arial;font-size:12px;float:left;border:1px dotted green; width: 25%;}
.skjult {display:none;}
.on {display:block;border-top:2px solid green;}
.off {display:none}

.billede {position:relative;float:left;height:90px;width:280px;}

.menup {
padding-top: 2px;
padding-bottom: 2px;
border-top: solid green 1px;
}
Avatar billede busschou Praktikant
25. maj 2005 - 16:08 #28
jeg forstår ikke det her
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() {
  var divs=document.getElementsByTagName("div");
    for (i=0;i<divs.length;i++){
      if (divs[i].className=="top") {
          divs[i].onmouseover=function() {
            this.firstChild.nextSibling.className="on";
            }
          divs[i].onmouseout=function() {
            this.firstChild.nextSibling.className="off";
            }
        }
    }
}
//-->
</script>
--
så jeg kan ikke hjælpe dig desværre.
Det virker ikke hos mig hverken i IE eller FF
Avatar billede netspinner Nybegynder
25. maj 2005 - 16:12 #29
Du får lige en HTML-fil jeg endnu ikke har modificeret til at referere til det eksterne script.

Nu burde du kunne danne dig et indtryk af menuen.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>&Oslash;koG&aring;rden</title>

<link href="style.css" rel="stylesheet" type="text/css">


<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() {
  var divs=document.getElementsByTagName("div");
    for (i=0;i<divs.length;i++){
      if (divs[i].className=="top") {
          divs[i].onmouseover=function() {
            this.firstChild.nextSibling.className="on";
            }
          divs[i].onmouseout=function() {
            this.firstChild.nextSibling.className="off";
            }
        }
    }
}
//-->
</script>

</head>
<body>
<center>
<div id="title_tbl">
        <a href="index.htm"><img src="grafik/logo.jpg" alt="&Oslash;koG&aring;rden - p&aring; nettet" class="billede" border=0></a>
<h1 id=t1>&Oslash;koG&aring;rden</h1>
<div id="t2">
... din &oslash;kologiske partner!
</div>
</div>

<div id="all">
<table> <!-- Menu indeholdt i tabel -->
<tr>
<td>
<center>
<div id="menu">
<div class="top">
  Om g&aring;rden
  <div class="skjult">
            <div class="menup" onmouseover="style.backgroundColor='lightgreen';" onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a href="historie.htm">Historie</a></div>
        <div class="menup" onmouseover="style.backgroundColor='lightgreen';" onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><img src="grafik/ansigt.bmp" border=0>&nbsp;&nbsp;&nbsp;<a href="medarbejdere.htm">Medarbejdere</a></div>
        <div class="menup" onmouseover="style.backgroundColor='lightgreen';" onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a href="job.htm">Job hos os?</a></div>
  </div>
</div>

<div class="top">
  Produkter
  <div class="skjult">
    <div class="menup" onmouseover="style.backgroundColor='lightgreen';" onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a href="produkter.htm">Vores produkter</a></div>
</div>
</div>

<div class="top">
  V&aelig;rd at vide
  <div class="skjult">
    <div class="menup" onmouseover="style.backgroundColor='lightgreen';" onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a href="oekologi.htm" >L&aelig;s om &oslash;kologi</a></div>
        <div class="menup" onmouseover="style.backgroundColor='lightgreen';" onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><img src="grafik/telefon.bmp" border=0>&nbsp;&nbsp;&nbsp;<a href="kontakt.htm">Kontakt os</a></div>
  </div>
</div>
</td>
</tr>
</table> <!-- Slut tabel for menu -->

<!-- Indholdet -->
<table width="430px">
<div id="txt">
  <b>Velkommen hos &Oslash;koG&aring;rden!</b><p>
  Vi er et selvst&aelig;ndigt &oslash;kologisk landbrug, der dyrker vores egne produkter uafh&aelig;ngigt af andre. Med <i>&Oslash;koG&aring;rden</i> får du en leverandør, hvor du altid kan være helt sikker p&aring; at f&aring; de bedste &oslash;kologiske r&aring;varer mellem h&aelig;nderne.
</p><p>
Vi leverer til restaurationer og er altid interesseret i at knytte faste bånd.
    For at l&aelig;se mere om <i>&Oslash;koG&aring;rden</i> og vores produkter, da anvend menunavigationen foroven.</p>
</div>
</table> <!-- Slut tabel for indhold -->
</div>
</div>
</table>
</center>
</body>
</html>
Avatar billede netspinner Nybegynder
25. maj 2005 - 16:14 #30
Det Javascript du ikke forstår er ikke så svært igen. Det gør at menuerne ikke er rullet ud når siden læses ind. Når du bevæger musen henover menuoverskrifterne, så rulles de ned. Menuerne er lidt falske, men de virker ganske fint.
Avatar billede busschou Praktikant
25. maj 2005 - 16:18 #31
ok kan godt se det nu...hjalp med stylesheetet ;o)
Den flimrer dog gevaldigt i FF den menu...
Anyway.. det burde altså ikke ændre på at du skulle kunne køre det eksterne
Avatar billede netspinner Nybegynder
25. maj 2005 - 16:24 #32
Ja, HELDIGVIS er det kun meningen at jeg skal designe det til IE. I Netscape flimrer det også vildt.

Men hovedsagen var jo - og det kan den også nu - køre det eksterne script. Problemet er at den IKKE kan køre "menu-scriptet" samtidig med. Det skal ikke placeres i en ekstern fil, bare i koden som det er nu. Jeg har prøvet med en 5-6 fremgangsmåder nu, men kan ikke se mig ud af det.
Avatar billede busschou Praktikant
25. maj 2005 - 16:26 #33
og du har prøvet includere det som det sidste...altså
--
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() {
  var divs=document.getElementsByTagName("div");
    for (i=0;i<divs.length;i++){
      if (divs[i].className=="top") {
          divs[i].onmouseover=function() {
            this.firstChild.nextSibling.className="on";
            }
          divs[i].onmouseout=function() {
            this.firstChild.nextSibling.className="off";
            }
        }
    }
}
//-->
</script>
<script language="JavaScript" src="slideshow.js"></script>
---
og ikke som tidligere før det andet?
Avatar billede netspinner Nybegynder
25. maj 2005 - 16:36 #34
Ja, jeg har prøvet det 3 gange for at være sikker. Det virker som den mest logiske løsning, men giver ingen effekt :-(
Avatar billede busschou Praktikant
25. maj 2005 - 16:39 #35
ok det eneste jeg kan komme i tanke om det kan skyldes så, det må være at du bruger både en "window.onload" og en "body onload"
Det er muligt den ene "overrider" den anden...det er jeg ikke nok inde i javascript til at kunne sige
Jeg ved bare at den læser alt når man gør det internt og eksternt osv...
Så det er ikke fordi den springer noget over
Du kunne evt forsøge rette det så du kalder begge i body onload måske
Avatar billede netspinner Nybegynder
25. maj 2005 - 17:00 #36
Det prøver jeg at eksperimentere lidt med. Hvis ikke det lykkes, opretter jeg lige en ny tråd med problemet. Under alle omstændigheder kan jeg oprette et nyt indlæg med point til dig :)
Avatar billede netspinner Nybegynder
25. maj 2005 - 17:01 #37
Avatar billede psykochicken Nybegynder
25. maj 2005 - 21:31 #38
Som busschou er inde på, så den ene onload den anden. Prøv med:
<head>
<script type="text/javascript" src="slideshow.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
function flaf() {
  var divs=document.getElementsByTagName("div");
    for (i=0;i<divs.length;i++){
      if (divs[i].className=="top") {
          divs[i].onmouseover=function() {
            this.firstChild.nextSibling.className="on";
            }
          divs[i].onmouseout=function() {
            this.firstChild.nextSibling.className="off";
            }
        }
    }
}
//-->
</script>
</head>
<body onload="flaf();runSlideShow();">
</body>
Avatar billede psykochicken Nybegynder
25. maj 2005 - 21:32 #39
hov....Som busschou er inde på, så ophæver den ene onload den anden...:)
Avatar billede netspinner Nybegynder
26. maj 2005 - 09:07 #40
Tak psykochicken - din løsning giver fint pote.
Hvis du kigger på http://www.eksperten.dk/spm/620630, vil du kunne se at jeg løste det i går. Men jeg kan nu bedre li' din, fordi den rent faktisk giver bedre mening ;-)
Avatar billede netspinner Nybegynder
26. maj 2005 - 09:08 #41
Jeg var i øvrigt ikke klar over at man kunne kalde to funktioner i <body onload>, men så lærte jeg det :-) Det kunne nok have sparet mig lidt tid i går...
Avatar billede busschou Praktikant
26. maj 2005 - 11:00 #42
netspinner >> Du kan altid kalde lige så mange funktioner du ønsker.. ikke kun i body .. De skal blot være sepereret af semikolone
Avatar billede psykochicken Nybegynder
26. maj 2005 - 23:37 #43
Ja hurtig har jeg aldrig været :) - Om du bruger den ene eller anden løsning er jo et temperamentspørgsmål.
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