Retrieveing ALL head elements in document including iframe

Question

I'm trying to add style elements to all ALL the head elements in a document, including those in an iframe.

if i use

var heads = document.getElementsByTagName('head');

It just returns the first head element and not the ones in the iframe. this is the complete code :

var heads = document.getElementsByTagName("head");
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(css));
for(var i=0;i<heads.length;i++) heads[i].appendChild(style);

but this doesn't seem to work! am i doing something wrong here...?

Answer 1

What if you getElementsbyTagName('iframe') and then get the children elements?

Beware that you may be hitting up against security restrictions on iframes that are put there to prevent cross site scripting.

Answer 2

I would still be interested in knowing the answer to this...

Answer 3

this is what worked for me. thanx for all the help btw -_-

try { if(top.location.href != window.location.href) { return; } }
catch(e) { return; }

window.setTimeout(getAllHeads, 1000);

function getAllHeads() {
    var heads = new Array();
    var head = document.getElementsByTagName("head")[0];
    if(head) addHead(head);
    var frames = document.getElementsByTagName("iframe");
    for(var i = 0, len = frames.length; i < len; i++) {
        var frame = frames[i];
        head = (frame.contentDocument).getElementsByTagName("head")[0];
        if(head) addHead(head);
    }

    function addHead(h) { heads.push(h); }

    alert(heads.length);
}