javascript - 从不同域以编程方式编辑 iframe 元素

Question

我有一个来 self 使用的网络应用程序的 iframe 表单(该表单是一个自定义查询表单，已添加到我在网络应用程序中的日记中)，我正在尝试将其嵌入我的网站。

所以嵌入到 iframe 中，这个论坛加载到我的主网站上，但是我希望将它的样式设置为看起来像我的网站等。

现在我已经有了一个非常基本的“联系我们”部分，我将用它来替换它，它具有我想要的所有样式以及所有设置，所以我想到我可以将此表格嵌入到我的页面，将其设置为隐藏，然后使用所有相同的样式展开我当前的联系我们表单，以具有与新表单相同的选项。

从这里我会从“firstName”中获取文本并将其放入 iframe 的“firstName”文本框中。

这是一种“解决方法”的想法，但我觉得这是最简单的方法，我遇到的问题是 javascript 不允许我从 iframe 设置数据，因为它来自不同的来源。当然，此表单托管在一个完全不同的网站上。

我有什么办法可以做到这一点，或者我最好的选择是通过并设计它吗？

如有任何帮助/建议，我们将不胜感激。

Answer 1

假设您不控制托管表单的网站

你已经被搞砸了。由于同源政策，您不能随意更改 iframe 中的内容。那将是一个巨大的安全问题。例如，您可以嵌入一个 iframe 来加载 Facebook 的登录页面，但也可以记录用户输入的密码。

You can read more about Same Origin Policy here

如果您确实可以控制网络服务器

那么你最好的选择是使用 postMessage()完成工作。