postMessage 可以用于从加载到 iFrame 的跨域页面中提取数据吗？

编程问答 2022-05-24

问题描述

我已经阅读了此处的相关帖子，但我一直无法弄清楚我想做的事情是否由于 Same-Origin Policy 而无法完成，或者 {{1}可能工作。我可能不理解我读过的解释，因为答案似乎相互矛盾。

背景：

我有一个在本地运行的网页，该网页具有用于输入文本的表单，并带有单选按钮来确定当前选择了哪个输入区域。

我还有一个包含 200 个网址的列表，这些网址与我想从中提取信息的网站相对应。

我想允许将 200 个 URL 中的任何一个加载到表单区域下方的 iFrame 中并显示目标网站。

我希望能够在 iFrame 中选择/突出显示目标网页上的文本，并使用 JavaScript/jQuery 填充在父页面上选择的文本区域。

例如，假设加载到 iFrame 中的 URL 是：https://www.subaru.com/vehicles/outback/index.html，我希望能够选择/突出显示位于 postMessage 中的文本并填充输入表单父页面。截至 2021 年 2 月 23 日，这些元素共有 5 个，文本如下：

  1. 26,795 美元
  2. 33/26
  3. 对称全轮驱动
  4. 8.7
  5. 75.7

这只是一个例子，我不会提前知道我需要从哪些元素中提取文本。

我的理解是，由于明显的安全问题，JavaScript 无法与加载到 iFrame（来自不同域）的页面进行交互。我显然可以控制父网页，但不能控制 iFrame 内显示的网页。可以使用 postMessage 来完成此操作吗？

如果可以，我们是否也可以提取元素属性，以及父/祖父/等。元素和属性？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

iframejavascriptjquerysame-origin-policy