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.

Solution

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 )'>

Comments

[Julian Dormon]

Well both of these issues deal with the parent trying to execute code in the child iframe. This is not the case in my situation. The code that is being executed is in the iFrame and pertains only to the iFrame.