Notifikationer

Markér alle som læst Log ud

dan_n Nybegynder

13. oktober 2004 - 16:22 Der er 15 kommentarer og
1 løsning

Angive Css i iframe, med javascript

HI

Jeg har en iframe på en af mine sider, men jeg kan ikke lige gennemskue hvordan jeg får linket til min css fil.

Problemmer er at iframet ikke indeholder en fil (ingen src=), men indholdet bliver genneret af noget javscript:
..
sTmp=miniframe.document.body.innerHTML
..

Normalt ville jeg jo blot kunne indsætte, i toppen af det dokument, jeg linkede til i min iframe:
<style type="text/css" title="currentStyle">
@import "../../z.css";
</style>

Er der nolge som har en ide.

Jeg har selv overveget et eller andet i denne stil.
miniframe.document.style = "../../z.css";

Synes godt om

roenving Novice

13. oktober 2004 - 16:28 #1

Hvorfor har du ikke bare css-linket i dokumentet i miniframe ?-)

-- og hvorfor bruger du ikke bare et link-tag til dit stylesheet:

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

Synes godt om

olebole Juniormester

13. oktober 2004 - 16:34 #2

<ole>

<script type="text/JavaScript">
function setStyles() {
var fD = frames["ib"].document;
fD.createStyleSheet("test.css");
}
</script>

<iframe name="ib"></iframe>
<br><br>
<button onclick="setStyles()">TEST</button>

/mvh
</bole>

Synes godt om

roenving Novice

13. oktober 2004 - 16:36 #3

Virker createStyleSheet i flere browsere ?-)

Synes godt om

dan_n Nybegynder

13. oktober 2004 - 16:37 #4

Det er fordi, at den tekst der findes i min iframe ikke et er regulært dokument, men kun noget tekst og uden både <body> <head> mm.
Teksten er et udtræk fra en database.

Findes der ikke en smart, lille trick så jeg ikke behøvet at indsætte linket til min css fil.

Jeg ville kunne gøre det sådan her.
------------------------------------------------

miniframe.document.style = "color: bla; bla:;"

--------------------------------------------
Men dette holder ligesom ikke når jeg har en css fil på 8 kb.

Jeg havde høbet på noget i denne stil.
------------------------------------------------

miniframe.document.stylesheet.href = "../../z.css"

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

Synes godt om

dan_n Nybegynder

13. oktober 2004 - 16:38 #5

> olebole kigger lige på dir svar og vende tilbage

Synes godt om

olebole Juniormester

13. oktober 2004 - 16:49 #6

Nej, desværre kan man i f.eks. Mozilla ikke manipulere stylesheets, runtime. Man kan sætte styles på enkelt-elementer, men ikke ændre et stylesheet.
Ikke engang dette forstår Moz:

<script type="text/JavaScript">
function setStyles() {
var fD = frames["ib"].document;
var myHead = fD.getElementsByTagName("HEAD")[0];
var ss = fD.createElement("LINK");
ss.rel = "StyleSheet";
ss.type = "text/css";
ss.href = "test.css";
myHead.appendChild(ss);
}
</script>

<iframe name="ib"></iframe>
<br><br>
<button onclick="setStyles()">TEST</button>

Lige ud af landevejen og helt after W3C - men Moz fatter det ikke :o|

Synes godt om

olebole Juniormester

13. oktober 2004 - 16:52 #7

Stylesheet'et bliver fin sat ind ( kan checkes med alert(fD.documentElement.innerHTML) ), men det virker ikke :o|

Synes godt om

roenving Novice

13. oktober 2004 - 16:56 #8

Har du prøvet at indsætte en head-sektion hårdt ?-)

sTmp = "<head></head>" + miniframe.document.body.innerHTML;
setStyles();

Synes godt om

dan_n Nybegynder

13. oktober 2004 - 17:04 #9

Jo, det virker fint nok

Men det er bare ikke helt det jeg skal bruge.

Det jeg har lavet er en simpel editor, hvor jeg han redigere mit database indholde (fed, kursiv og lign.).
Derfor vil jeg helt undgå at have et link i selve tesksten, idet den senere skal trækkes od og indsættes i den indholds skabelon, som allerede indeholder et head, body og derved også et link til mit stylesheet.

Det vil altså komme til at se såleded ud
<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="../../z.css">
<head>
<body>
..


<link rel="stylesheet" type="text/css" href="../../z.css">
dsadas
dsad

..

Men bliver nok lidt svært at undgå ??

Synes godt om

roenving Novice

13. oktober 2004 - 17:10 #10

Du kan da bare fjerne det ekstra linktag:

txt = "al den kode, du har";

txt = txt.replace(/<body(.*)(<link[^>]*>)/i,"<body$1");

Synes godt om

olebole Juniormester

13. oktober 2004 - 17:25 #11

Jamen, hvis det er en editor, fungerer den formodentlig kun i IE - og så kan du blot bruge mit første eksempel :)

Synes godt om

olebole Juniormester

13. oktober 2004 - 17:28 #12

PS: dokumentet i din iframe indeholder både HTML-, Head- og BODY-tags, så koden kommer netop til at se sådan ud (i iframe-dokumentet):

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../z.css">
<head>
<body>

</body>
</html>

Synes godt om

olebole Juniormester

13. oktober 2004 - 17:30 #13

roenving >> Prøv lige denne her i Mozilla:

<script type="text/JavaScript">
function setStyles() {
var fD = frames.ib.document;
var s = "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">";
s += "<link rel=\"StyleSheet\" type=\"text/css\" href=\"test.css\"></head><body></body></html>";
fD.write(s);
fD.close();
}
function writeToBody() {
fD = frames.ib.document;
fD.body.innerHTML = "Se, dét virker ...! ;o)";
fD = frames["ib"].document;
}
</script>

<iframe src="about:blank" id="ib" name="ib"></iframe>
<br><br>
<button onclick="setStyles()">Set Styles</button>
<button onclick="writeToBody();alert(frames.ib.document.documentElement.innerHTML)">Write to Body</button>

Alt ser jo ganske fornuftigt ud ...... so far. Prøv så at åbne din JS-konsol og se, hvad der sker, når du reloader dokumentet :o/

Synes godt om

olebole Juniormester

13. oktober 2004 - 17:32 #14

... glem sidste linie i 'writeToBody()' - den er overflødig :)

Synes godt om

roenving Novice

13. oktober 2004 - 17:39 #15

Tjah jeg forstå ikke problemet med at et dokument linker til sig selv ?-)

og Error: uncaught exception: Permission denied to get property HTMLDocument.body får jeg så hele tiden -- heller ikke forstået !-)

Synes godt om

olebole Juniormester

13. oktober 2004 - 18:34 #16

Denne her klarer den til dels:

window.onunload = function() {
frames.ib.location.replace("about:blank");
}

Den første error kommer stadig, men den blokkerer ikke for yderligere brug af browseren.
Hvis man havde lidt mere tid på onunload-event'en, ville den fange fejlen helt. Det virker fint, hvis der replace'es med en knap inden der reloades.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS