I have a page 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

I have a page https://dev.leadformly./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

• javascript
• jquery
• html
• iframe
• bootstrap-daterangepicker

• Which datepicker are you using? – 31piy Commented Jul 12, 2017 at 9:55
• Default jquery datepicker - jqueryui./datepicker – dang Commented Jul 12, 2017 at 9:56
• 1 The error seems to be encountered in DateRangePicker, which is not a jQuery datepicker. Can you double check? – 31piy Commented Jul 12, 2017 at 9:58
• It's Bootstrap "daterangepicker" and not jquery, sorry about that. – dang Commented Jul 12, 2017 at 10:33
• 1 why you are using iframe anyway here? you are loading a different url, so what is the benefit of using iframe here? – Amr Elgarhy Commented Jul 19, 2017 at 13:47

3 Answers 3

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.

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/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 remended if you want to access DOM in its content. If full or partial isolation is your only concern please try using web ponent's isolation method to:

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

I think jQuery is not able to read the iframe element that is why it is showing Cannot read property top of undefined error.

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

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

jQuery

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