2

i have a a website that displays an iframe for specific information. Both of them come from the same domain. Therefore any blocks for cross-site scripting should not be an issue.

The HTML Page inside the Iframe now uses some JavaScript to alter the DomElement depending on specific users actions I try to change the css. Therefore I do following JavaScriptCode: 

var oldlink = document.getElementsByTagName("link").item(1);
    
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
     
document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);

This works fine in standalone. Problem is now when it is embedded in an iframe. I now get the document from the main/parent html document an not the one from the own (child) document. Does anyone know why this is? It seems to work in Firefox but not in Chrome and IE.

As it looks up the "wrong" documet I'll get an Error in the DeveloperTools that states: The node to be replaced is not a child of this node.

I know it can't find the Node, since it's not in the parent document but in the child document.

Anyone an Idea on how I can solve this or what I need to look up? The only stuff i found is how to access parent or child documents, this is actually the behaviour I don't want.

Thansk for any idea

dsharew
  • 10,377
  • 6
  • 49
  • 75
eagle
  • 63
  • 2
  • 8

1 Answers1

4

Not so much clear what you want but if you want to update elements inside the frame you need to replace 'document' by iframe document like this:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

Then your code will be like this: 

var oldlink = innerDoc.getElementsByTagName("link").item(1);

var newlink = innerDoc.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);

innerDoc.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
Community
  • 1
  • 1
dsharew
  • 10,377
  • 6
  • 49
  • 75
  • 1
    thanks, that did the trick. I now also load the head like this: `var head = document.head || document.getElementsByTagName("head")[0];` – eagle Oct 15 '15 at 09:22