SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Location
    Northern Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inject a string into an iframe?

    I have run across a situation where i have an iframe which loads a webpage from a file. I need to be able to inject a css file and a js file into the iframe, so that when the site is being viewed through the iframe, these css rules and script will be applied, but if the site is viewed outside of the iframe, by just navigating to the file thats loaded into the iframe for example, the css and js file don't get loaded..

    Is this possible?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,681
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Zany90 View Post
    I have run across a situation where i have an iframe which loads a webpage from a file. I need to be able to inject a css file and a js file into the iframe, so that when the site is being viewed through the iframe, these css rules and script will be applied, but if the site is viewed outside of the iframe, by just navigating to the file thats loaded into the iframe for example, the css and js file don't get loaded..

    Is this possible?
    Yes, it it perfectly possible. You can access the contentDocument, assuming that it has an id of 'localFromFile' with:

    Code javascript:
    var iframe = document.getElementById('localFromFile'),
        iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

    Then with access to that document, you can use the following function to inject a style tag in to a head section.

    Code javascript:
    function addcss(css, document) {
        document = document || window.document;
     
        var head = document.getElementsByTagName('head')[0],
            s = document.createElement('style');
        s.setAttribute('type', 'text/css');
        if (s.styleSheet) { // IE
            s.styleSheet.cssText = css;
        } else {
            s.appendChild(document.createTextNode(css));
        }
        head.appendChild(s);
    }

    And you can make use of the above function as follows:

    Code javascript:
    addcss('css/customcss.css', iframeDocument);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Location
    Northern Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply..

    It doesn't seem to be working for me though

    The iframe is loading the page fine but the css file still not being loaded where ive called the iframe localfromfile by id and changed the path to the css file when the function is called.

    Having a look through the code in the iframe, it isn't being injected

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,681
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    There's a couple of stumbling blocks here.

    First, the addcss function is for adding a css declaration to the page, not an actual css file. That can be done with the following simpler function:

    Code javascript:
    function addcssfile(cssfile, document) {
        document = document || window.document;
     
        var head = document.getElementsByTagName('head')[0],
            link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet')
        link.setAttribute('type', 'text/css')
        link.setAttribute('href', cssfile)
        head.appendChild(link);
    }

    And second, you need to wait until the iframe has been loaded before you will be able to make changes to the iframe itself, which can be done by waiting for the iframe's onload event, or by using more modern techniques to wait until the iframe's DOM is ready to be worked with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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