[CSS/JS] CSS laden met javascript

vrijdag 11 februari 2011 20:09

Acties:

0 Henk 'm!

Topicstarter

Hoi,

Ik ben momenteel bezig met een aanpassing aan mijn framework: Links met een bepaalde class moeten de href in een lightbox tonen ipv als nieuwe pagina. Dit betekent dat er van alle pagina's een lightbox-versie komt die via AJAX wordt aangeroepen: Eerst de HTML en daarna de bijbehorende js en css. Dit laatste (de CSS) lukt me niet.

Ik gebruik hiervoor deze benadering, omdati k die er vrij netjes uit vond zien. Voor het dynamisch laden van javascript werkt ie prima, voor css niet. Ik zie in mijn debugger dat de css-pagina niet wordt opgevraagd bij de server, hoewel ie in de generated source netjes vermeld staat.

Mijn generated (gekuisde-) HEAD, met onderaan de toegevoegde nodes (onderste twee):

HTML:

<head>

    <meta charset="utf-8" />

    <title>*****</title>

    <meta name="Keywords" content="***" />
    <meta name="Description" content="***" />
    <meta name="Generator" content="***" />
    <meta name="Robots" content="index, follow" />

    <link rel="P3Pv1" href="/w3c/p3p.xml" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="canonical" href="***" />
    <link rel="search" type="application/opensearchdescription+xml" title="***" href="***" />
    <link rel="stylesheet" href="***" type="text/css" media="screen, projection" title="default" />
    <link rel="stylesheet" href="***" type="text/css" media="print, braille, embossed, tty, tv" />
    <link rel="stylesheet" href="***" type="text/css" media="handheld" />
    <link rel="alternate stylesheet" href="***" type="text/css" title="contrast" />

    <script type="text/javascript" src="***"></script>

    <link href="***" title="default" type="text/css" rel="stylesheet">
    <script src="***" type="text/javascript"></script>
</head>

Mogelijk wordt de toegevoegde css niet geladen omdat ik verschillende stylesheets gebruik en deze stylesheets middels javascript laat wisselen, echter: de preferred stylesheet wordt geset in de page onload. Die is natuurlijk allang voorbij tegen de tijd dat de lightbox wordt opgeroepen.

Iemand enig idee wat hier misgaat?

Alvast bedankt!

vrijdag 11 februari 2011 20:29

Acties:

0 Henk 'm!

tonyisgaaf

Ik doe ongeveer hetzelfde, maar dan met directe properties i.p.v. setAttribute(). Ik heb het idee gejat van de Twitter widget, die nog iets moois doet met een ge-timede check of de CSS al geladen is, voordat de HTML DOM wordt ge-update.

JavaScript:

var cssLink = document.createElement("link");
cssLink.href = "styles.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(cssLink);

Check anders ook de source van de Twitter widget!

-- edit --
Dit is het stuk van de Twitter widget wat ik bedoel (ik heb de copyright notice voor de vorm toegevoegd).

JavaScript:

/**
 * Twitter - http://www.twitter.com
 * Copyright (C) 2010 Twitter
 * Author: Dustin Diaz (dustin@twitter.com)
 *
 * V 2.2.3 Twitter search/profile/faves/list widget
 * http://twitter.com/widgets
 */
 Q.loadStyleSheet = function(h, g) {
     if (!TWTR.Widget.loadingStyleSheet) {
         TWTR.Widget.loadingStyleSheet = true;
         var f = document.createElement("link");
         f.href = h;
         f.rel = "stylesheet";
         f.type = "text/css";
         document.getElementsByTagName("head")[0].appendChild(f);
         var i = setInterval(function() {
             var j = F(g, "position");
             if (j == "relative") {
                 clearInterval(i);
                 TWTR.Widget.hasLoadedStyleSheet = true
             }
         },
         50)
     }
 };

[ Voor 48% gewijzigd door tonyisgaaf op 11-02-2011 20:33 ]

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

vrijdag 11 februari 2011 21:40

Acties:

0 Henk 'm!

xilent_xage

Topicstarter

voor de duidelijkheid: het inserten in de head gaat prima, zie de gegenereerde HEAD. Het probleem is dat ie er niks mee doet. En ja, de URL heb ik 10x gecontroleerd. Dus mijn vraag is: waarom zou een browser de aldus ingevoegde stylesheet niet lezen / toepassen?

vrijdag 11 februari 2011 23:23

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Met wat voor content type wordt die stylesheet geserveerd? Als je server hem namelijk als text/plain oid stuurt kan het zijn dat browsers hem negeren. Even de headers van je request controleren dus.

Anyone who gets in between me and my morning coffee should be insecure.

zaterdag 12 februari 2011 09:45

Acties:

0 Henk 'm!

xilent_xage

Topicstarter

MueR schreef op vrijdag 11 februari 2011 @ 23:23:
Met wat voor content type wordt die stylesheet geserveerd? Als je server hem namelijk als text/plain oid stuurt kan het zijn dat browsers hem negeren. Even de headers van je request controleren dus.

ach wat stom, natuurlijk. bedankt!

Onderwerpen