如何从外部域将鼠标悬停、突出显示和获取网页中 DOM 对象的属性

Question

我正在尝试开发一个Web应用程序，该应用程序具有类似于Chrome开发人员工具中的元素选择器的功能。 我需要在我的应用程序的容器内打开来自其他不同域的任何 URL，并且页面的外观应该与普通浏览器中显示的完全一样，并具有所有样式。然后，我应该能够将鼠标悬停在打开的页面中的元素上，突出显示它，并显示有关此元素的一些属性信息。

我创建了一个简单的 Angular 应用程序，并使用Iframe标签打开第三方页面。 但是，当我尝试使用addEventListener将事件处理程序附加到 Iframe 中的 DOM 元素时，我收到跨域错误消息。

未捕获的圆顶感知：阻止了具有原点的帧 "http://localhost:4200"访问跨源帧。

我在stackoverflow中读到了一些帖子，例如"JavaScript无法读取跨站点内容"和"如果您无法控制框架站点，则无法绕过跨域策略"。有关更多详细信息，请查看链接：

获取跨域 iframe 的 DOM 内容

跨域 iframe 问题

以下是我的代码：

<iframe id="pFrame" onload="frameLoad();" src="" />

function frameLoad() {
let frame = document.getElementById("pFrame");
let iframeWindow = frame.contentWindow;
iframeWindow.addEventListener("mouseover", mouseOver, true);
iframeWindow.addEventListener("mouseout", mouseOut, true);
iframeWindow.addEventListener("click", onClick, true);
}  

您有任何建议或建议不同的技术来解决此问题吗？

谢谢

Answer 1

你试过寻找Mozilla Goggles项目吗？

它有一个集成的编辑器，他们的检查器似乎非常强大。
另外，它不需要计算机上的任何应用程序。