查找用户在 iframe 中单击的元素答案

【问题标题】：Find the element the user clicked inside an iframe查找用户在 iframe 中单击的元素
【发布时间】：2013-01-09 17:00:18
【问题描述】：

我正在使用iframe 开发 HTML 编辑器，我希望用户能够在添加后调整图像大小。因此，当用户单击iframe 内的图像时，会运行一个侦听器。但它给我的只是body标签而不是点击的元素。我已经尝试了很多方法，但似乎都没有。

我的这个区域的代码是：

//网站展示的是iframe

//iframeBody是iframe内body的id

siteDisplay.document.getElementById('iframeBody').addEventListener("click", testForClicks, false); 


function testForClicks(){

 console.log(siteDisplay.document.activeElement);

 console.log(this);

 //both give me bodytag

}

我需要点击元素或突出显示元素

任何帮助都会很棒，谢谢

【问题讨论】：

标签： javascript iframe editor wysiwyg

【解决方案1】：

如果您需要 highlighted（或 active）元素，您可以使用 Selection/Range（链接）API

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var firstNode = range.startContainer;
// etc.

【讨论】：

【解决方案2】：

iframe 就像在您的窗口中打开的单独窗口。所以，

iframe = document.getElementById('YourIframeId');
iframe.contentDocument.getElementById('innerIframeElementId').addEventListen......

这会奏效。另外，如果您想访问 iframe 窗口，请访问：

iframe.contentWindow.

希望这会有所帮助。

【讨论】：