6

It is possible to have an outer div with pointer-events: none; and another div inside it with pointer-events: auto;. The outer div will be transparent to click events (ie it won't react to click events but underlying html controls will) and the inner one will.

However, I now have a scenario where I need to do the same thing with an iframe, but it is not working. I set pointer-events: none; on the iframe, but then the inner divs that should be clickable are not even if they have pointer-events: auto; set.

There is another similar question here, but is has been closed for being off-topic. I don't understand why. It is a very valid html/css question.

Community
  • 1
  • 1
Jean-François Beauchamp
  • 5,485
  • 8
  • 43
  • 77

1 Answers1

3

iFrames are treated as a single piece of content and not part of the page in which the iFrame resides, so, no, it is not possible.

The renderer and DOM are treating the iFrame as a black box. This is exactly why you cannot, for example, run regular methods like iFrameElement.childNodes[0] and similar (and get the <html> of the iFrame). You have to run iFrameElement.contentWindow.document.documentElement or something like that. It is a completely separate browsing context.

PhistucK
  • 2,466
  • 1
  • 26
  • 28