Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Injecting your own style sheet into another web page

    Hello,

    I am working on a project (a Firefox extension if it matters), which basically highlights words on the page that a user enters via a text box. To do this, I need to apply an outside style sheet to the page, or insert my style sheet directly into the existing website.

    The two things that I have tried so far:

    First, I tried this:
    Code:
        var head = document.getElementsByTagName('head')[0];
        var styleString = "<link rel=\"stylesheet\" href=\"highlight.css\" type=\"text/css\"/>";
        head.innerHTML = head.innerHTML + styleString;
    This made my JavaScript not execute at all (I didn't get any errors in the error console that seemed to be related, so I'm still not sure why this didn't work).

    After that, I tried to inject the style rules directly into the browser like this:
    Code:
      var CSS = "
    .tools {
        margin-left: auto;
        margin-right: auto;
        width: 100&#37;;
        text-align: center;
        padding-bottom: 20px;
        border-bottom: 4px solid;
    }
    
    ... Insert the rest of the really long style sheet here ...
    
    ";
    document.styleSheets[0].insertRule(CSS,0);
    This did not work either.

    Any idea on this would be much appreciated! Thanks

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    I don't think what you propose is possible (Thank Heavens! )

    For security reasons JavaScript cannot access anything beyond the domain of the current page. This is known as the "same origin policy" and prevents a document or script loaded from one origin from getting or setting properties of a document from a different origin.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    i have had trouble adding external stylesheets like this before.
    i doubt messing with head's innerHTML will trigger re-calc of the style rules.
    you could try building the link tag programatically ala document.createElement("link"),
    but i have had trouble doing that as well.

    i use my own tested approach in situations like the one you outline.


    try using the two functions below.
    the first one loads a file into a string.
    the second one turns a string into a new stylesheet.


    Code:
    
    function IO(U, V) {
    //LA MOD String Version. A tiny ajax library. 2007, DanDavis
        var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
        X.open(V ? 'PUT' : 'GET', U, !1);
        X.setRequestHeader('Content-Type', 'text/html')
        X.send(V ? V : '');
    return X.responseText;}
    
    function aCSS(iCSS) {var vi = "adds a css tyle section to the document, filled with text like an external stylesheet";var D = document;var h = D.getElementsByTagName("head");if (!h[0]) {return;}var ns = document.createElement("style");ns.type = "text/css";h[0].appendChild(ns);try {if (ns.styleSheet && ns.styleSheet.cssText) {ns.styleSheet.cssText = iCSS;return;}ns.innerHTML = iCSS;} catch (e3) {try {ns.appendChild(document.createTextNode(iCSS));} catch (e3) {}}}
    
    // example aCSS("  body * {color: red}")

    for your purpose,


    Code:
      aCSS(IO("highlight.css"));

    -----------------------------
    note that to inject script into arbitrary pages,
    you must meet at least one of the following requirements:

    -run the code from the address bar (all browsers)
    -run inside an extention (firefox, opera, and in a complicated manner, IE)
    -run from a javascript console or utility like firebug. (firefox, opera)
    -run using grease monkey (firefox)
    Last edited by rnd me; 06-17-2008 at 08:37 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks goes out to both of you! You guys really helped me out, and I have some new things to look into now as well.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •