时间戳

首页 > 解决方案 > 如何将鼠标悬停、突出显示并从外部域获取网页中的 DOM 对象的属性

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

问题描述

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

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

未捕获的 DOMException：阻止具有源“ 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);
}

你有什么建议或者建议不同的技术来解决这个问题吗？

谢谢

标签： javascripthtmliframecross-domainaddeventlistener

解决方案

您是否尝试过查看Mozilla Goggles项目？

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

推荐阅读