Update iframe body color after load

Question

I have a page ,page1.html that loads page2.html via an iframe . I need to change the body color of the iframe page (page2.html) to override the CSS style that's loaded on page2.html. (both pages are on same domain). How can that be updated via Javascript ?

Answer 1

A bit of googling turn up this:

Scripting IFrames

It suggests window.frames[iframeName].document should work.

Answer 2

Since both pages lives on the same domain it should be easy.

Try this,

 var changeIFrameBodyColor = function()
 {
   var iFrame =  document.getElementById('iFrame');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // DOM
     var iFrameBody = iFrame.contentDocument.getElementdByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     var iFrameBody = iFrame.contentWindow.document.getElementdByTagName('body')[0];
   }
   iFrameBody.style.color = '#ff0000';
 }
 <a href="javascript:;" onclick="changeIFrameBodyColor()">Change Color</a>
 <iframe id="iFrame" src="page2.html" ../>