Error: Permission denied to access property 'document' in iFrame

Question

I have a parent html page which uses jquery to append a dynamic iframe which has a source to another domain. I have already set the X-Frame-Options to allow this and loading plain content is not a problem. In fact all my other scripts seem to be working fine.

The html page which loads in the iFrame, uses the jQuery DirtyForms plugin which has several lines which look like $(document). Both the dirty forms code and jQuery scripts are local to the iframe's document.

When the any of these lines executes, I receive the following error in Firefox ( I have not tested any other browsers), Error: Permission denied to access property 'document'.

I have been reading up on this and this seems to be a problem if the parent page is trying to access the child's scripts or visa-versa, but in my case, the scripts that are erring are local to the child.

BTW. The child code, when NOT loaded within the iFrame, works perfectly.

I am at a loss right now to find a work-around.

I assume that $(document) is somehow being evaluated as the parent.

Is there some way of correcting this behavior? Perhaps by modifying the plug-ins code. Perhaps, $(document).find('contentWindow')...??

I appreciate the help! Thanks.

Answer 1

Well you cant access it..Now the question is why?

For that just go through below links

Permission denied to access property 'document'

Error: Permission denied to access property 'document'

And in ur case if u want to do anything on page load then better use below code for IFrame

 <iframe ........ onload='yourFunction( this )'>