1

I'm developing a chrome extension. It is basically a toolbar standing at the upper part of the visible screen, added to the page as an Iframe.

My problem is that I set it a high z-index to make sure the bar appears; and then the elements below it (below the Iframe) gets not clickable (lets say I got a piece of the iFrame that is transparent, what allows the user to see the elements below it). Other Stack Overflow questions doesn't address my problem, since they suppose I have control at both the upper and the lesser elements, and I don't have at the lesser one.

Mr Guliarte
  • 739
  • 1
  • 10
  • 27

2 Answers2

0

If only certain parts of the iframe should let the clicks pass through then in the iframe's onclick handler send a message to the content script of the page via postMessage with the click point coordinates and in the content script's document.addEventListener for that message use querySelectorAll(':hover') or document.elementFromPoint while temporarily hiding the iframe to find the clicked element and then dispatch a new click event to that element via dispatchEvent (plus the iframe's top-left corner offset in the original document).

Community
  • 1
  • 1
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
  • Sorry, could you please explain it better? Who sends and who receives the message? And do I really need to hide the Iframe? – Mr Guliarte Nov 11 '15 at 23:07
  • Not sure how I can explain it better without implementing the whole thing myself. As for hiding it's only one method and it won't be noticeable I think because it'll be done just for the duration of the function call. – wOxxOm Nov 11 '15 at 23:10
  • Well, let me see if I can make a better question: you tell of a "content script of the page" and a "content script's document.addEventListener". But I got just one content script archive. Can I suppose both this quotes relates to the same script? – Mr Guliarte Nov 11 '15 at 23:19
  • Yes, I mean your extension's content script that runs on the page. – wOxxOm Nov 11 '15 at 23:23
-1

You can do this simply by using CSS

pointer-events: none
height: 0px;
overflow: visible;
hreitsma
  • 121
  • 7
  • This will work in all browsers except in IE 10 and below unfortunately, Javascript would be the best solution for that i'm afraid – hreitsma Nov 11 '15 at 22:43
  • Yes, but I need the bar to be clickable! And if I set this property to the whole Iframe, I can't make anything inside it clickable anymore! – Mr Guliarte Nov 11 '15 at 22:44
  • a little hack should work: height:0px; overflow:visible; ofcourse with: pointer-events: none; – hreitsma Nov 11 '15 at 22:46
  • You can “reverse” it on inner/descendant elements, see https://developer.mozilla.org/en/docs/Web/CSS/pointer-events#Notes – CBroe Nov 11 '15 at 22:47
  • iframe's content document isn't an inner/descendant element. – wOxxOm Nov 11 '15 at 22:56
  • Also `height:0` on iframe will collapse it even with the `overflow:visible` because iframes don't have intrinsic height. – wOxxOm Nov 11 '15 at 23:04
  • @hreitsma I think it does not works in this case, since it is an Iframe! – Mr Guliarte Nov 11 '15 at 23:04