Using parent STYLES in IFRAME

Discussion in 'JavaScript' started by ruby, Jun 13, 2008.

0
  1. #1
    I have an issue where I need to use styles from a parent in an IFRAME.

    For example I have these files in a.html:

    <STYLE>
    .aa_table { width:325px; background-color: none; padding: 3px; }
    .aa_table_2 { padding-bottom: 1px; padding-top: 4px; padding-left: 3px; padding-right: 3px; vertical-align:top; text-align:left; }
    </STYLE>
    <IFRAME src="http://www.aaaa.com/b.html"></IFRAME>


    In the IFRAME (which is on another domain) I need to access those styles.... how can I do this? I have tried using a function in the IFRAME which copies the stules over like this:


    function styleMe() {
    if(window.top && window.top.location.href != document.location.href) {
    // I'm small but I'm not alone

    // all parent's <link>s
    var linkrels = window.top.document.getElementsByTagName('link');
    // my head
    var small_head = document.getElementsByTagName('head').item(0);
    // loop through parent's links
    for (var i = 0, max = linkrels.length; i < max; i++) {
    // are they stylesheets
    if (linkrels.rel && linkrels.rel == 'stylesheet') {
    // create new element and copy all attributes
    var thestyle = document.createElement('link');
    var attrib = linkrels.attributes;
    for (var j = 0, attribmax = attrib.length; j < attribmax; j++) {
    thestyle.setAttribute(attrib[j].nodeName, attrib[j].nodeValue);
    }

    // add the newly created element to the head
    small_head.appendChild(thestyle);

    }
    }

    // maybe, only maybe, here we should remove the kid's own styles…

    } else {
    alert('I hate to tell you that, but you are an orphant :( ');
    }
    }
    styleMe();


    But I get errors... which are caused by cross domain scripting.



    Another way I can attempt this is to pass the styles through to the IFRAME via parameter, as an example:


    <STYLE>
    .aa_table { width:325px; background-color: none; padding: 3px; }
    .aa_table_2 { padding-bottom: 1px; padding-top: 4px; padding-left: 3px; padding-right: 3px; vertical-align:top; text-align:left; }
    </STYLE>
    <IFRAME src="http://www.aaaa.com/b.html?styles=.aa_table { width:325px; background-color: none; padding: 3px; }.aa_table_2 { padding-bottom: 1px; padding-top: 4px; padding-left: 3px; padding-right: 3px; vertical-align:top; text-align:left; }"></IFRAME>

    Obviously I would escape the parameter!

    Now my question is... who knows how to basically grab the stylesheet elements in javascript so that I can pass them to the IFRAME via get request?

    Any help would be appreciated!!!!
     
    ruby, Jun 13, 2008 IP