Question

I wanted to hide some stuff by accessing to the iframe using javascript so I wrote this javascript function.

function changeCSS(){ 
frame = document.getElementById('frame1'); 
frame.contentWindow.document.getElementById('GlobalTitleAreaImage').style.display='none'; 
}

I then called the function when I load the iframe (onload= javascript: changecss())

Everything seems to work fine in IE but in Safari it does’t work. Any ideas why it is behaving this way and how I should fix this.

Thanks

Answer 1

Note that both the frame and the location of the Javascript itself must be on the same domain for this to work. Safari and IE may handle it differently if both are from the file protocol, also.

For ones that are not in the same domain look into cross-domain communication with iframes and the potential HTML 5 solution, wrapped nicely with fallback methods by libraries & plugins such as porthole, xssinterface, easyxdm, and others.

While Safari is listed as supporting content Window, Chrome is not. For cross-browser compatibility use a combination of contentWindow and contentDocument to ensure you hit on a supported property. So try:

function changeCSS(){ 
    var frame = document.getElementById('frame1'); 
    var content = frame.contentWindow || frame.contentDocument;
    content.document.getElementById('GlobalTitleAreaImage').style.display='none'; 
}