How can an iframe be disabled using Javascript, such that the user is unable to interact with the iframe's contents (i.e. scrolling, selecting, dragging, etc)? For example, a Google map in an iframe can normally be dragged and zoomed. How would these actions be prevented?
While you can't technically disable HTML iFrames, you can prevent user interaction and make them appear read-only.
If a user has javascript disabled, iframes will work. An iframe tag has attributes “height” and “width,” which allows the designer great latitude with dimensions and format like 300×250 , 728×90 depending on the Ad size. Iframe tag can appear anywhere on the page and several iframes can be added if wished to.
To remove an iframe with JavaScript, we can use the remove method. to add an iframe. to select the iframe with querySelector . And then we call remove to remove it.
1 Answer. Show activity on this post. If you don't want the contents of the iframe to be interactable by the user, you can disable pointer-events on it. But as you want it to be scrollable, just put a full sized iframe in a smaller div with overflow: scroll.
If you're wanting to disable mouse interaction, this should work.
Put a DIV over the top of your iframe, like so (replace top, left, width and height values with your own):
<div id="blank" style="display:none; position:absolute; top:100px; left:100px; width:600px; height:400px;">
and when you want to disable the iframe, do this in javascript:
document.getElementById("blank").style.display="block";
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