8

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.

NightOwl888
  • 55,572
  • 24
  • 139
  • 212
Julian Dormon
  • 1,767
  • 4
  • 32
  • 58
  • Why would you need access to the `contentWindow` if the "code that is being executed is in the iFrame and pertains only to the iFrame"? – idbehold Nov 12 '14 at 17:50

2 Answers2

2

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 )'>
Community
  • 1
  • 1
Neel
  • 11,625
  • 3
  • 43
  • 61
  • 1
    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. – Julian Dormon May 07 '14 at 12:02
0

In Dirty Forms 1.x, the default behavior attaches event handlers to anchor tags in any parent page that the current page is hosted within. The code that does that looks like:

$(top.document).on('click', 'a', aBindFn);
$(top.document).on('submit', 'form', formBindFn);

That is, it is attaching event handlers to the window.top.document. You can turn off that behavior by using:

$.DirtyForms.watchParentDocs = false;

In Dirty Forms 2.x, this behavior has been removed because it pertained only to one specific use case of iFrames (hosting the form that used Dirty Forms within an iFrame). You can now customize event binding to attach event handlers either to parent (host) pages or to child iFrames as needed by your page, but by default there is no interaction with iFrames. This should allow you to be able to work around issues such as this one.

NightOwl888
  • 55,572
  • 24
  • 139
  • 212