Allow clicking through the iframe, while still able to interact with its contents

Question

Allow clicking through the iframe, while still able to interact with its contents

I am facing a challenge of making an iframe click-through, while ensuring that the body of the iframe remains clickable. I have attempted to achieve this using the following code:

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'

Within the iframe's content, I have applied the following CSS:

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

While this setup successfully displays the body as desired, it also makes it click-through like the rest of the iframe. My goal is to make only the body clickable within the iframe, with the rest of the iframe being click-through.

It is important to note that the iframe is consistently larger than the content within it. Additionally, my limitations prevent me from accessing the iframe content through the main site, restricting me to only modifying its source code.

javascript html css iframe click-through

Answer 1

Answer №1

DISCLAIMER: It has been nearly two years since OP created this question, and my answer is inspired by Ian Wise's bump on the question with added insights in the comments.

Your situation involves a logic scenario between a document and a child document: "If a click event within the child document does nothing, apply that click event to the parent document," making it impossible to address using just HTML/CSS.

Iframes represent distinct documents. While they maintain a child-parent relationship with their containers, any event occurring within the iframe will be handled solely by the iframe itself.

An effective idea that involves some coding but can resolve the issue:

Add a transparent div over all stacked iframes to capture the click event position.
Parent logic ->
- Loop through the array of existing iframe elements.
- Send the click position until one of the iframes responds positively.

function clickOnCover(e, i) {
if(e && e.preventDefault) 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 ->
- Create a function that takes the clientX, clientY and checks for potential activities at that position (this part may require careful consideration!).
- Respond positively if an action took place, and vice versa.

window.addEventListener("message", function(e) {
// Logic to evaluate e.x & e.y

e.success = actionExists; // Indicates whether an action occurred.

if(window.parent && window.parent.postMessage) {
window.parent.postMessage(e);
}
});

This solution manages the event handling within the parent document, necessitating only iterating through the stacked iframes as needed.

Here is a relevant Stack Overflow question supporting my suggested approach: Detect Click in Iframe

Answer 2

DISCLAIMER: It has been nearly two years since OP created this question, and my answer is inspired by Ian Wise's bump on the question with added insights in the comments.

Your situation involves a logic scenario between a document and a child document: "If a click event within the child document does nothing, apply that click event to the parent document," making it impossible to address using just HTML/CSS.

Iframes represent distinct documents. While they maintain a child-parent relationship with their containers, any event occurring within the iframe will be handled solely by the iframe itself.

An effective idea that involves some coding but can resolve the issue:

Add a transparent div over all stacked iframes to capture the click event position.
Parent logic ->
- Loop through the array of existing iframe elements.
- Send the click position until one of the iframes responds positively.

function clickOnCover(e, i) {
if(e && e.preventDefault) 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 ->
- Create a function that takes the clientX, clientY and checks for potential activities at that position (this part may require careful consideration!).
- Respond positively if an action took place, and vice versa.

window.addEventListener("message", function(e) {
// Logic to evaluate e.x & e.y

e.success = actionExists; // Indicates whether an action occurred.

if(window.parent && window.parent.postMessage) {
window.parent.postMessage(e);
}
});

This solution manages the event handling within the parent document, necessitating only iterating through the stacked iframes as needed.

Here is a relevant Stack Overflow question supporting my suggested approach: Detect Click in Iframe

Answer 3

Answer №2

Resizing iframes using only CSS is not possible.
To achieve proper resizing, consider implementing the following solution:

One approach involves adding a small snippet of JavaScript code to enable communication between the parent page and the iframe

mainpage.js

var iframe = getIframe();
setIntervalMaybe(() => {
    // request 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);

Answer 4

Resizing iframes using only CSS is not possible.
To achieve proper resizing, consider implementing the following solution:

One approach involves adding a small snippet of JavaScript code to enable communication between the parent page and the iframe

mainpage.js

var iframe = getIframe();
setIntervalMaybe(() => {
    // request 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);

Allow clicking through the iframe, while still able to interact with its contents

Answer №1

Answer №2

Similar questions

WebView Background Image Displays in Simulator but Not on Actual Device

Populate the form fields with data extracted from the uploaded CSV file

Struggling with jquery's addClass method when trying to apply a class to

Player-Oriented Online Game: Addressing Target Accuracy Challenges in ctx.setTransform

Using ES6 classes in Express routes: It is not possible to create the property 'next' on the string '/'

Guide on uploading a file from a browser dialog using RSelenium

Tips for incorporating the "define" function into your Mocha testing

Attempting to implement a b-table that can manage multiple arrays within an array

Eliminate the gap between spans when wrapping words

How can I automatically direct my NodeJS application to the login screen?

Loop through every attribute using a Jquery iteration process

Encountering difficulties while attempting to import a module in Next.js

"Implementing time delays and transitions with jQuery toggle for stylish class changes and smooth

Display content from a PHP page inside a Twitter Bootstrap modal

Attempting to transfer a Vue component from one component to another, without directly involving the App.vue file

Displaying XML data in an HTML table

Having trouble preventing the scroll from moving even after setting body overflow to hidden in Next Js

I struggled to successfully click a button using Selenium Python, despite experimenting with various xpaths and css selectors

Obtaining real-time stock information for the website

Does the AngularJS inject function operate synchronously?