时间戳

首页 > 解决方案 > 在跨源页面上突出显示元素

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

问题描述

我需要使用 Chrome 开发人员工具完成与“检查元素”功能非常相似的事情（见附件截图）。在此处输入图像描述

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

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

标签： javascriptcsscss-selectorscross-domaindeveloper-tools

解决方案

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

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 之间。

推荐阅读