How to add a transparent layer above an iframe?

user_11752443 0
Viewed 364

I am trying to detect clicks on an iframe, but I found that no clicks on iframe can be detected.

So I am thinking of a work around:

add a transparent layer (a div) above the iframe. If iframe's z-index is 0, the layer's would be 1 or larger.

Then I will be detecting clicks on this layer, which should be doable.

And the layer should have the exactly same dimentions as the iframe, and be placed at the exactly same position.

I am wondering how to do that?

If I add the layer before the iframe in HTML, the former will be displayed on Y-axis above the latter, but the desired effect is that the former is displayed on Z-axis above the latter.

I may be able to use JavaScript code to find the iframe's demensions and positions, and set the same values to the layer, but it seems to be not elegant.

Any bettet solution?

Or, it anyone can teach me how to detech clicks on iframe, that would be optimal!

Any hints will be appreciated!

frontend iframe css html javascript
2 Answers

There is no way that I know of to track clicks on an iframe you do not have dev access to edit it. If you do have access to it, do a quick Google search for tracking iframes with GTM. Assuming you don't have access:

Adding a layer over the iframe should be easy enough by creating a block with a transparent background using position: absolute although I'm not so sure about using it to track clicks. Here is a helpful link for tracking clicks on a div: https://www.trevorayers.com/track-div-clicks-in-google-tag-manager/

I would try something like this:

<div class="iframe-parent">
<div class="transparent-block"></div>
<iframe></iframe>
</div> 
    
.iframe-parent {
width: 1150px;
height: 800px;
position: relative;
}
    
.transparent-block {
background-color: transparent;
width: 100%;
height: 100%;
position: absolute;
}

Then use Google Tag Manager to track clicks on the transparent-block selector.

Untested, but interested to see if this works for you.

user_167545890

You can try using CSS positioning for this. A separate div with position fixed or absolute.

The above answer should work.

user_112061290
Related