Update iframe body color after load

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 ?

From stackoverflow

• A bit of googling turn up this:

  Scripting IFrames

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

• 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" ../>
  

  KooiInc : Make that getElementsByTagName