Question

我想获取iframe上的输入值。当我点击主页上的按钮时，我想得到这个值。

好吧，我有这段代码

MainPage上的Javascript：

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

MainPage上的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”为空。

你能帮我吗？ THX

Answer 1

你要说的第一件事是：

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

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

让我们谈谈第二种情况。那么这项工作很容易......

您只需访问iframe（可能会将iframe标记设为id“示例”）。然后，您可以使用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中那样访问表单和元素，我不会在这里介绍...

让我们跳到这个答案的有趣部分！让我们围绕相同的起源poliy工作。这也称为“跨站点脚本”（继续和谷歌......）

所以基本上归结为一件事：

有一个属性可以从子文件和父文档中访问！

是document.location属性！

那你能做什么？

子站点可以修改它，然后父站点可以监视它并对更改做出反应。

另一个不错的功能是url片段（＃之后的部分）。这部分不会重新加载网站，所以javascript可以很好地修改它，父网站可以定期轮询它并对它做出反应......

基本上，这为可以处理的父文件和子文档提供了沟通的基础。有精美设计的图书馆！ “使用facebook登录”的javscript版本基于相同的原则！

这意味着儿童文件必须与父母合作，因此这是故意的，双方基本上在工作中一起工作。

所以这没关系，他们可以解决相同的原始政策。

希望这能在理论上涵盖你的问题，并为你提供一些在实践中使用的东西！

在SO上度过美好的一天：）

从iframe获取一个值到mainPage

1 个答案: