Javascript date picker error in iframe

Question

I have a page https://dev.leadformly.com/datepicker having an iframe In that particular '', I am writing the HTML code dynamically by ajax call by 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 on the date picker it will throw an error in the console like:

Uncaught TypeError: Cannot read property 'top' of undefined

Can you help me to resolve this issue? Or just explain the cause so it will help me to resolve it

Answer 1

You're getting this error because you're trying to access the internal DOM of an iFrame from the parent DOM containing it. The "click" event from the parent DOM cannot make calls to the elements inside a child iFrame.

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

Answer 2

The final option you have 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, please move away from iframe. iframe element is created to be a sandboxed environment and is prone to very high security risks when you open the allow-scripts. The resulting web page/external site put in iframe can do anything... literally anything from getting access to credentials, cookies, access, etc if you remove sandboxing.

Iframe is highly not recommended if you want to access DOM in its content. If full or partial isolation is your only concern please try using web component's isolation method to:

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