使 iframe 点击，但不是 iframe 的正文

Question

我怎样才能使 iframe 点击进入，但让 iframe 的正文仍然可以点击？

我试过了：

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'

在我的 I 框架内，我正在使用以下 css：

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

这会导致 body 可见（这是我想要的），但它像 iframe 的其余部分一样可以点击。我希望 iframe 的主体是可点击的，但实际 iframe 元素的所有其余部分都应该是可点击的。

iframe 总是比它里面的 body 大。

不幸的是，我无法从主站点访问 iframe 内容（因此无法访问 scrollHeight 等），我只能更改其实际源代码。

Answer 1

免责声明： OP 大约在两年前提出了这个问题，我的回答遵循 Ian Wise 提出的问题并详细说明（参见 cmets）。

---

您在此处描述的内容涉及文档和子文档之间的逻辑：“如果单击事件在子文档中没有执行任何操作，则将该单击事件应用于父文档”，因此无法处理使用 HTML/CSS。

iframe 是不同的文档。它们与其容器确实存在子父关系，但 iframe 内发生的事件将由 iframe 处理。

一个需要一些代码但可行的想法：

• 在所有堆叠的 iframe 上方放置一个透明 div，然后捕获 点击事件位置。
• 父逻辑->
  • 遍历现有 iframe 元素的数组。
  • 发送点击位置，直到其中一个 iframe 返回肯定响应。

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 逻辑 ->
  • 有一个函数接受clientX, clientY 并检查该位置的可能活动（可能很棘手！）。
  • 如果发生操作，将积极响应，反之亦然。

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);
	}
});

此解决方案持续管理父文档中的事件，并且只需要遍历任何数量的堆叠 iframe。

---

找到一个相关的 SO 问题以进一步支持我的主张：Detect Click in Iframe

Answer 2

这在 CSS 中是不可能的。
最简单的方法是正确调整 iframe 的大小。假设您可以访问 iframe 内容，则可以使用以下解决方案：

你可以加一点 JS 让父页面知道 iframe 的高度

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);