14

How can I make an iframe click-through, but make that iframe's body still be clickable?

I tried:

iframe.style.width = '100%'
iframe.style.height = '100%'
iframe.style.display = 'block'
iframe.style.position = 'fixed'
iframe.style.backgroundColor = 'transparent'
iframe.style.pointerEvents = 'none'
iframe.style.border = '0'
iframe.frameborder = '0'
iframe.scrolling = 'no'
iframe.allowTransparency = 'true'

and inside of my I frame I'm using the following css:

html, body {
    /* background:none transparent; */
    pointer-events:auto;
}

This results in body being visible (which is what I want), but it is click-through like the rest of the iframe. I want the body of the iframe to be clickable, but all the rest of the actual iframe element should be click-through.

The iframe is always bigger than the body inside of it.

Unfortunately I cannot access the the iframe content from the main site (so accessing the scrollHeight etc isn't possible), I can only change its actual source code.

10
  • 1
    If I got it right, you want the iframe element to be clickable, but nothing inside it?
    – fingeron
    Commented Oct 31, 2018 at 9:03
  • what click-through means? click with no event? Commented Oct 31, 2018 at 9:03
  • @fingeron What I assume he was asking, was is it possible to have the HTML inside of the iFrame catch a mouse event, however if no HTML elements exist where the cursor fires in the iFrame, the mouse event will pass through the iFrame to the HTML on the original DOM.
    – Ian Wise
    Commented Oct 31, 2018 at 9:05
  • @SilentTremor 'click through' refers to not catching a mouse event, as if the element does not exist.
    – Ian Wise
    Commented Oct 31, 2018 at 9:07
  • 1
    Ian Wise is correct with both, his assumption what I was asking and with what 'click through' means in this context.
    – Forivin
    Commented Nov 5, 2018 at 10:21

2 Answers 2

7
+100

DISCLAIMER: OP created this question almost two years ago, my answer follows Ian Wise's bumping the question and elaborating on it (see comments).


What you are describing here involves logic between a document and a child document: "If a click event did nothing inside child document, apply that click event to parent document", and therefore cannot be approached using HTML/CSS.

Iframes are different documents. They do have a child-parent relationship with their containers, but an event that occurs within the iframe will be handled by the iframe.

An idea that requires some code but will work:

  • Place a transparent div above all the stacked iframes, and catch the click event pos.
  • Parent logic ->
    • Iterate through array of existing iframe elements.
    • Send click pos until one of the iframes returns a positive response.

function clickOnCover(e, i) {
	if(e && e.preventDefaule) e.preventDefault();
	if(i && i >= iframes.length) {
		console.log("No action.");
		return;
	}
	var iframe = iframes[i || 0];
	if(iframe.contentWindow && iframe.contentWindow.postMessage) {
		iframe.contentWindow.postMessage({ x: e.clientX, y: e.clientY, i: i });
	}
}
function iframeResponse(e) {
	var response = e.data, iframeIndex = response.i;
	if(response.success)
		console.log("Action done on iframe index -> " + iframeIndex);
	else 
		clickOnCover({ clientX: response.x, clientY: response.y }, iframeIndex+1);
}

  • iFrames logic ->
    • Have a function that accepts the clientX, clientY and checks for possible activies in that position (might be tricky!).
    • Will respond positively if an action occurred, and the opposite.

window.addEventListener("message", function(e) {
	// Logic for checking e.x & e.y
	
	e.success = actionExists; // Some indicator if an action occurred.
	
	if(window.parent && window.parent.postMessage) {
		window.parent.postMessage(e);
	}
});

This solution keeps managing the event within the parent document and only requires iterating through whatever amount of stacked iframes.


Found a relevant SO question to further support my claim: Detect Click in Iframe

3
  • The real answer here is: "you can't". Not if you want the actual, original, isTrusted pointer event. You can get a mocked event, but it cannot do everything the original one can, because it bears a completely different class of restrictions at both browser and device level. It won't be a user-initiated event, it will be a generated one. I'd say your answer was complete if it also pointed this out.
    – tao
    Commented Nov 8, 2018 at 9:38
  • @AndreiGheorghiu I stopped reading after "you can't" :) A person put a lot of time searching for information online so I'd say it's safe to assume this solution is important to him. Whether isTrusted, isSafe, isPossible, doesn't matter. If security is an issue I'm sure he'll take the necessary precautions. Anyway, I'm leaving the decision making to him, while doing my best to provide a way in which the final goal IS possible. Thank you for your feedback though.
    – fingeron
    Commented Nov 8, 2018 at 11:09
  • @AndreiGheorghiu Reading your message fully, please notice that I did not ask to "mock" the click event. I did suggest some logic of finding an element by location is preferable.
    – fingeron
    Commented Nov 8, 2018 at 11:11
6

This is not possible with CSS.
The easiest way is to resize the iframe properly. Assuming you have access to iframe content, the following solution is possible:

You might add a little JS to allow the parent page to know the iframe height

mainpage.js

var iframe = getIframe();
setIntervalMaybe(() => {
    // ask for size update
    iframe.contentWindow.postMessage({action: "getSize"}, document.location.origin);
}, 100)
window.addEventListener("message", function receiveMessage(event) {
  switch(event.data.action) {
    case "returnSize":
      // updateIFrameSize(event.data.dimensions);
      console.log(event.data.dimensions);
      break;
  }
}, false);

iframe.js

window.addEventListener("message", function receiveMessage(event) {
  switch(event.data.action) {
    case "getSize":
      event.source.postMessage({action: "returnSize", dimensions: {
        width: document.body.offsetWidth,
        height: document.body.offsetHeight
      }}, event.origin);
      break;
  }
}, false);
8
  • 1
    @fingeron, if you're implying Andrii copied your answer, I'd like to point out your answer is not proper, as it lacks a technical implementation (the code). If your answer only provides general advice without code, chances are anyone writing code following your advice will provide a more useful, hence more helpful answer than yours. You can't claim copyright on advice and if anyone is able to formulate a better answer upon your advice they're encouraged to do so.
    – tao
    Commented Nov 4, 2018 at 20:34
  • To be technically exact, you can't even claim copyright on code. There are quite a few legal precedents to back my statement up, but that's a completely different story.
    – tao
    Commented Nov 4, 2018 at 20:39
  • @fingeron, it is another answer, you are talking about passing click events, I'm talking about just usual resizing, this approach is simpler, bug free, while doing the same Commented Nov 5, 2018 at 15:22
  • @fingeron, by the way, I thumbed up your answer :-) It was first thumb up on it Commented Nov 5, 2018 at 15:27
  • 2
    @AndreiGheorghiu Added some code following your helpful advice.
    – fingeron
    Commented Nov 8, 2018 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.