i have a a website that displays an iframe for specific information. Both of them e 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);

i have a a website that displays an iframe for specific information. Both of them e 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

• javascript
• html
• iframe
• document

Share Improve this question Follow edited Oct 15, 2015 at 9:29 dsharew 10.7k66 gold badges5454 silver badges7676 bronze badges asked Oct 13, 2015 at 15:44 eagleeagle 6322 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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);