7

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

Matt
  • 25,467
  • 18
  • 120
  • 187
dang
  • 2,342
  • 5
  • 44
  • 91
  • Which datepicker are you using? – 31piy Jul 12 '17 at 09:55
  • Default jquery datepicker - https://jqueryui.com/datepicker/ – dang Jul 12 '17 at 09:56
  • 1
    The error seems to be encountered in `DateRangePicker`, which is not a jQuery datepicker. Can you double check? – 31piy Jul 12 '17 at 09:58
  • It's Bootstrap "daterangepicker" and not jquery, sorry about that. – dang Jul 12 '17 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 Jul 19 '17 at 13:47
  • There is an embed code which I need to use. So, am using iframe. – dang Jul 19 '17 at 13:49
  • Have you access to javascript files of datepicker? If so, then try to use [solution](https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1366#issuecomment-169437289) from GitHub. – Alexander Jul 19 '17 at 17:27
  • Does datepicker work without the frame. Hit the iframe URL and check if its working independently. If yes, next step would be check it inside an iframe. – Milan Chheda Jul 20 '17 at 06:42
  • @dang can you share the code which comes from ajax. (`data.democode`) – Kamuran Sönecek Jul 21 '17 at 08:14
  • [Second paramter of `jQuery` `post`](https://api.jquery.com/jquery.post/) is data to be posted, which is incorrect in your case. Also provide more code to understand what you trying to solve. JsFiddle or similar set up would help us. – Amit Bhagat Jul 24 '17 at 15:40

3 Answers3

12

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.

Cristian Ramon-Cortes
  • 1,838
  • 1
  • 19
  • 32
Carson the Powers
  • 771
  • 5
  • 12
3

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);
Ritesh Nair
  • 3,327
  • 1
  • 17
  • 24
Durgpal Singh
  • 11,481
  • 4
  • 37
  • 49
3

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

Gary
  • 2,293
  • 2
  • 25
  • 47