在跨源页面上突出显示元素
Highlight elements on cross origin page
我需要使用 Chrome 开发人员工具完成与“检查元素”功能非常相似的操作（请参阅随附的屏幕截图）。
我正在寻找的主要内容是识别和突出显示给定页面上的元素的能力。我可以显示叠加层，向元素添加 class 等。我知道使用 iFrame 并尝试访问和操作 DOM w/in iFrame 不会直接工作，因为它的跨域。如果您可以控制站点，我也知道 post 消息，但我可能不会一直都知道。我遇到的主要问题是我只是想暂时突出显示页面上的元素，就好像我点击了“检查元素”并显示它一样。当用户在我的应用程序中加载网站时，它不需要持久化或任何东西，只是为了突出显示特定元素（例如 h1 标签）。如果有办法的话，甚至可以使用 chrome 开发人员工具，它允许您“编辑为 HTML”。
有什么方法可以使用 iFrame、新选项卡或任何其他方式来突出显示给定网站上提供 URL 的元素吗？我附上了“目标”的另一张图片。
您似乎有三个选项来突出显示元素。
1.浏览器扩展
2。通过 postMessage 发送事件来引导 iframe 站点操作其 DOM
3。通过 postMessage 发送事件以接收有关 DOM 和覆盖元素在 iframe 顶部的定位信息。
#1 似乎需要更长的时间进行大修。 #2 和 3 仅当您始终可以访问 iframe 中的网站时才有可能。
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.
我需要使用 Chrome 开发人员工具完成与“检查元素”功能非常相似的操作（请参阅随附的屏幕截图）。
我正在寻找的主要内容是识别和突出显示给定页面上的元素的能力。我可以显示叠加层，向元素添加 class 等。我知道使用 iFrame 并尝试访问和操作 DOM w/in iFrame 不会直接工作，因为它的跨域。如果您可以控制站点，我也知道 post 消息，但我可能不会一直都知道。我遇到的主要问题是我只是想暂时突出显示页面上的元素，就好像我点击了“检查元素”并显示它一样。当用户在我的应用程序中加载网站时，它不需要持久化或任何东西，只是为了突出显示特定元素（例如 h1 标签）。如果有办法的话，甚至可以使用 chrome 开发人员工具，它允许您“编辑为 HTML”。
有什么方法可以使用 iFrame、新选项卡或任何其他方式来突出显示给定网站上提供 URL 的元素吗？我附上了“目标”的另一张图片。
您似乎有三个选项来突出显示元素。
1.浏览器扩展
2。通过 postMessage 发送事件来引导 iframe 站点操作其 DOM
3。通过 postMessage 发送事件以接收有关 DOM 和覆盖元素在 iframe 顶部的定位信息。
#1 似乎需要更长的时间进行大修。 #2 和 3 仅当您始终可以访问 iframe 中的网站时才有可能。
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.