Menu
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
762
The date picker can be used in 3 simple steps: A – Load the date picker CSS and Javascript. B – Define the HTML fields. B1 – For an inline date picker, create an <input type="text"/> and <div> container. B2 – For a popup date picker, just create an <input type="text"/> field.
There sure are a lot of date pickers on the Internet for jQuery, Bootstrap, React, and whatever else. But I understand, it really does not make any sense to load an entire library, just for the sake of a simple plugin. So here it is, a sharing of my simple lightweight date picker, all done in pure CSS Javascript – Read on!
This may be done through a "phone home" + timeout method using the browser tracker ID. I mention this because this iframe failure detection is useful for launching associated apps, but only if the failure can be detected. I think that you can bind the load event of the iframe, the event fires when the iframe content is fully loaded.
So, the only option is to make the request from your server to see if you can display the site in your IFrame. So, on your server.. your web app would make a request to www.google.com and then inspect the response to see if it has a header argument of X-Frame-Options. If it does exist then you know the IFrame will error.
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.
72
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
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
