在跨源页面上突出显示元素

Question

我需要使用 Chrome 开发人员工具完成与“检查元素”功能非常相似的事情（请参阅随附的屏幕截图）。

我正在寻找的主要内容是识别和突出显示给定页面上的元素的能力。我可以显示叠加层、向元素添加类等。我知道使用 iFrame 并尝试访问和操作 iFrame 中的 DOM 不会直接工作，因为它是跨域的。如果您可以控制该网站，我也知道发布消息，但我可能不会一直拥有。我遇到的主要问题是我只是想暂时突出显示页面上的元素，就好像我点击了“检查元素”并显示它一样。当用户在我的应用程序中加载网站时，它不需要持久化或任何东西，只需突出显示特定元素（例如 h1 标签）。如果有办法的话，即使是使用 chrome 开发者工具“编辑为 HTML”的能力也会起作用。

有什么方法可以使用 iFrame、新标签或任何其他方式来突出显示给定网站上提供了 URL 的元素？我附上了“目标”的另一张图片。

Answer 1

您似乎有三个选项可以突出显示元素。

1.浏览器扩展

2。通过 postMessage 发送事件以指导 iframe 站点操作其 DOM

3.通过 postMessage 发送事件以接收有关 DOM 和覆盖元素在 iframe 顶部的定位信息。

#1 似乎需要更长时间的检修。只有当您始终可以访问 iframe 中的网站时，才能使用 #2 和 3。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

window.postMessage() 方法可以安全地启用 Window 对象之间的跨域通信；例如，在页面和它生成的弹出窗口之间，或者在页面和嵌入其中的 iframe 之间。