从父页面获取或设置 IFrame 内控件的值

引言

有时，我们需要在父页面中实现以下操作。

• 获取iFrame内部控件的值
• 设置iFrame内部子控件的值

背景

这是我在撰写博客Skype Status on CRM Form时研究出来的一段代码。
如果可以，请阅读该博客。

概念是什么？

通常，我们会使用以下方法来获取Document内部的Control。

var yourChildiFrameControl = document.getElementById("childiFrameControlId"); 

但是，当我们在父页面中编写此代码时，Document将引用父页面而不是iFrame。这将导致undefined JavaScript error，因为该Control不存在于父Document中。
因此，目标是首先找到iFrame的Document对象，然后借助该对象查找其中的任何Control。

如何操作？

在获取iFrame的Document对象之前，让我们先捕获iFrame。

var childiFrame = document.getElementById("iFrameID"); 

现在，借助捕获的iFrame对象(childiFrame)，让我们检索iFrame Document。

var innerDoc = childiFrame.contentDocument  
		|| childiFrame.contentWindow.document; 

注意：这里使用OR语句是为了跨浏览器支持。由于contentDocument在IE中不起作用，因此使用contentWindow.document。要了解更多信息，请参考Frame/IFrame contentDocument 属性。

因此，我们得到了iFrame Document(innerDoc)。现在只需要在这个Document中按ID搜索控件。

// Get the Control inside iFrame Document.
var yourChildiFrameControl = innerDoc.getElementById("childiFrameControlId");

因此，我们可以轻松地使用Control对象(yourChildiFrameControl)获取或设置值。

// Get value of Control
var value = yourChildiFrameControl.value;
 
// Set value to the Control 
yourChildiFrameControl.value = "Your value";

注意：由于我们获得了位于iFrame内的Control对象(yourChildiFrameControl)，因此我们可以对其执行所有JavaScript DOM操作。

重要提示

如果父页面和iFrame都在同一个域中，则此技术将有效。
如果其中任何一个在不同域中，则我们必须遵循窗口消息传递技术，我已经在我的技巧中进行了描述 - 跨域IFrame通信 - 跨浏览器解决方案。

你喜欢吗？

如果您觉得这个技巧有帮助，请点赞、分享并添加一些评论。这对我来说意义重大。这也有助于我改进我的技术技能。感谢您的阅读。希望您喜欢这个技巧。

关注点

这个技巧/诀窍最有趣的部分是，我们只找到了iFrame的Document，仅此而已。太棒了！！！

历史

• 2013年9月25日：初始发布
• 2013年9月26日：添加了“重要提示”部分