CODEWITHSUNDEEP
javascriptjquery
Django Johnson
Django Johnson

Reputation: 1449

Prevent all JS events inside <iframe>

I want to display an <iframe> in my site, but I want the site that I am displaying to only be scrollable. All other events should be disabled.

So that the container of the <iframe>, the <iframe> has a width and height of 100%, behaves as if it has nothing inside it.

Almost like it is a scrollable screenshot of the site. So on hover and on click inside the <iframe> don't work.

The reason I am doing this is that the container of the <iframe> needs to be draggable, but can't be dragged as all events on the <iframe> are being registered within the <iframe>.

How can I do this in javascript and / or jQuery?

Can I apply a .preventDefault() to everything except scrolling?

Upvotes: 2

Views: 6086

Answers (2)

scrblnrd3
scrblnrd3

Reputation: 7416

Set up a clear div on top of it, if you can use CSS, set the opacity to zero, and set the z-index to 1 on the div, and to -1 on the iframe. Doing that should make the div receive the mousedown events. You could also do document.getElementById("id").onclick=function(){} and make nothing happen on them

Upvotes: 1

Halcyon
Halcyon

Reputation: 57719

You could overlay a div with opacity: 0 (meaning it's fully transparent). That div will intercept most events, such as onclick.

You can then add a mousedown listener to that div which will initiate the 'drag'. The iframe then moves with the transparent div.

This will also disable scrolling though, but maybe you can mirror a scroll event from the div to the iframe .. will be tricky.

Upvotes: 4

Related Questions