Iframe with event pointers: none; but with a div inside it with an event pointer: auto;

It is possible to have an external div with event pointers: none; and another div inside it with event pointers: auto ;. The outer div will be transparent to event clicks (i.e., it will not respond to click events, but the main html controls will be), and the inner one will.

However, now I have a scenario where I need to do the same with an iframe, but it does not work. I set the event pointer: none; on an iframe, but then the internal divs, which should be interactive, do not even have event pointers: auto; set.

There is another similar question , but it is closed in order to be off topic. I do not understand why. This is a very important html / css question.

+4
source share
1 answer

iFrames are considered as one piece of content, and not part of the page where the iFrame is located, so no, this is not possible.

The renderer and the DOM treat the iFrame as a black box. That is why you cannot, for example, run ordinary methods such as the iFrameElement.childNodes[0]like (and get an <html>iFrame). You need to run iFrameElement.contentWindow.document.documentElementor something like that. This is a completely separate viewing context.

+3
source

Source: https://habr.com/ru/post/1539468/


All Articles