Question

我有两个文件 - main.html（父文档）和 enterKey.html（子文档）。

在main.html

中

<script>
...
</script>
<iframe id="key" src="enterKey.html"></iframe>

在enterKey.html中：

<input id="sbox" type="text">

我正在尝试访问在sbox中输入的值，以便在 main.html 中使用。但由于用户将不断更新 sbox ，我需要将更新反映在 main.html 中。

例如，如果用户键入sbox“hello worlx”，然后在一秒后将其更正为“hello world”，则必须立即在父文档中反映更改。

如何实现这一目标？

我一直在考虑使用document.getElementById('key').contentWindow.sbox但不知道如何在我的示例中使用它。

非常感谢提前！

Answer 1

比你想象的要简单得多：

var iframe = document.getElementById('key').contentWindow;
var value = iframe.getElementById('sbox').value;

只需将iframe视为新的document元素。

Answer 2

我认为最好的方法是在字段上设置onchange功能，您可以使用以下命令访问父页面上的元素：

parent.document.getElementById("id")

示例：

在enterKey.html中，您可以通过以下方式为文本字段设置onchange：

<input id="sbox" type="text" onChange="enterKeyFunc()">

然后在enterKey.html中你会有一个名为enterKeyFunc（）的函数或看起来像这样的东西：

function enterKeyFunc()
{
    parent.document.getElementById("mainHTMLFieldId").value = document.getElementById("sbox").value;
}

然后在main.html中确保您要保持同步的字段的id为“mainHTMLFieldID”，并且应该这样做。如果您有任何其他问题，请与我们联系。

再次编辑：

我认为如果要在父级中设置变量，请从

更改上述js

parent.document.getElementById("mainHTMLFieldId").value = document.getElementById("sbox").value;

到

parent.globalVariableName = document.getElementById("sbox").value;

这当然只有在您尝试设置的变量是父页面上的全局变量时才有效。我个人很长时间没有这样做，但我相信这可以做到。