javascript - 从 Iframe 获取值到 mainPage

Question

我想获取 Iframe 上的输入值。我想在单击主页上的按钮时获取此值。

好吧，我有这段代码

主页上的 JavaScript:

  var targetDiv = document.getElementById('CP_dem');

主页上的 HTML:一个选项卡，当您单击它时，它会加载 Iframe和一个调用 javascript 函数的按钮

Iframe 上的 Html:

 Zip Code : <input class="textForm" id="CP_dem" type="text" name="CP_dem" maxlength="5" size="5" value="42101">

我想在单击 MainPageButton 时获取输入值。

JavaScript 代码显示“targetDiv”为空。

你能帮我一下吗？谢谢

Answer 1

您必须告诉的第一件事是:

iframe 是否托管在与父网站相同的 http 主机上？如果没有，您将遇到 JavaScript 同源保护，请阅读:http://en.wikipedia.org/wiki/Same_origin_policy

简而言之:您将无法访问该内容。可是等等!有一个解决方法，我将在处理第二种情况后解释，其中 http 主机是相同的!

那么我们来谈谈第二种情况。那么工作就很容易了...

您只需访问 iframe(可能为 iframe 标记提供一个 id“example”)。然后您可以使用 example.contentWindow.document 或 example.contentDocument 访问该窗口

无论设置哪一个，都取决于浏览器。您将必须在 js 中进行一些检查。类似的东西

if(document.getElementById('contentWindow.document').contentWindow) {
 ifdoc = document.getElementById('contentWindow.document').contentWindow.document
} else {
 ifdoc = document.getElementById('contentWindow.document').contentDocument
}

然后你就可以像在 javascript 中一样访问表单和元素，我不会在这里介绍......

所以让我们跳到这个答案中有趣的部分!让我们围绕同源策略进行工作。这也称为“跨站点脚本”(继续用 google 搜索一下...)

所以基本上可以归结为一件事:

有一个属性可以从子文档和父文档访问!

它是 document.location 属性!

那么你能做什么呢？

子站点可以修改它，然后父站点可以监视它并对更改使用react。

另一个不错的功能是 url 片段(# 后面的部分)。这部分不会重新加载网站，因此 javascript 可以愉快地修改它，并且父站点可以定期轮询它并对其使用react...

基本上，这为可以处理的父子文档提供了沟通的基础。为此有设计精美的图书馆! javscript版本的“用facebook登录”也是基于同样的原理!

这意味着子文档必须与父文档合作，因此这是有意的，双方基本上一起工作。

所以这是可以的，而且它们可以围绕相同的源策略工作。

希望这从理论上涵盖了您的问题，并为您在实践中提供了一些东西!

祝您度过愉快的一天:)