使iframe点击,而不是iframe的正文

如何制作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'

在我的框架内我使用以下css:

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

这会导致身体可见(这就是我想要的),但它像iframe的其余部分一样是点击式的.我希望iframe的主体可以点击,但实际的iframe元素的其余部分应该是点击式的.

iframe总是比它里面的身体大.

不幸的是我无法从主站点访问iframe内容(因此无法访问scrollHeight等),我只能更改其实际的源代码.

免责声明:OP差不多两年前创建了这个问题,我的回答是在Ian Wise提出问题并详细说明之后(见评论).

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

iframe是不同的文件.它们与容器之间存在子父关系,但iframe中发生的事件将由iframe处理.

一个需要一些代码但可以工作的想法:

在所有堆叠的iframe上方放置一个透明div,并捕获click事件pos.

父逻辑 - >

迭代现有iframe元素的数组.

发送Click click,直到其中一个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);
}

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

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