Javascript date picker error in iframe

Question

I have a page https://dev.leadformly.com/datepicker with iframe In this particular ", I am dynamically writing HTML code using an ajax call using the following code.

<script> $(document).ready(function(){ $.post(URL, function (data) { //here it retruns the HTML code $("body").html('<iframe style="width:100%;height:384px;"></iframe>'); $("body iframe")[0].contentDocument.write(data.democode); }, 'json' ); }); </script> 

Now, when I click the date select button, it will raise an error in the console, for example:

 Uncaught TypeError: Cannot read property 'top' of undefined 

Can you help me solve this problem? Or just explain the reason so that it helps me solve it.

Answer 1

You get this error because you are trying to access the internal iFrame DOM from the parent DOM containing it. The "click" event from the parent DOM cannot make calls to elements inside the child iFrame .

May I ask why you are trying to use iFrame in this situation? I can almost assure you that you better not use it.

Answer 2

I think jQuery cannot read the iframe element, so it shows Cannot read the top property from undefined .

Use id="ifreame" in the iframe element, then it should work.

 <iframe id="ifreame" style="width:100%;height:384px;"></iframe> 

JQuery

 $("body #iframe")[0].contentDocument.write(data.democode); 

Answer 3

The last option is to try using the sandbox property.

allow-scripts: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.

https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe

If this does not work, go from the iframe. An iframe is created as an isolated environment and is subject to very high security risks when opening allow-scripts. The resulting web page / external site, placed in the iframe, can do something ... literally anything from gaining access to credentials, cookies, access, etc., if you delete the sandbox.

Iframe is strongly discouraged if you want to access the DOM in your content. If full or partial isolation is your only concern, try using the web component isolation method to:

https://developer.mozilla.org/en-US/docs/Web/Web_Components