從母文檔訪問iframe中的文本字段並存儲以供使用

Question

我有兩個文檔 - main.html（父文檔）和enterKey.html（子文檔）。

在main.html中

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

在enterKey.html：

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

我試圖訪問main.html中 S盒中使用的輸入值。但因爲用戶將不斷更新sbox我需要的更新反映在main.html。

例如，如果用戶鍵入sbox「hello worlx」，然後稍後將其更正爲「hello world」，則該更改必須立即反映在父文檔中。

這是如何實現的？

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

非常感謝提前！

Answer 1

我認爲最好的辦法是設置在該領域的onchange功能，他們可以訪問與父頁面上的元素：

parent.document.getElementById("id") 

例子：

在enterKey.html你將被設定爲電平變化的文本字段：

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

然後也enterKey.html你將有一個名爲enterKeyFunc（）或一些功能看起來有點像這樣的：

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

然後在main.html中確保你想要的領域，以保持同步的具有「mainHTMLFieldID」的ID，並且應該這樣做。如果您有任何其他問題，請告訴我。再次

編輯：

如果要設置父變量從

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

更改上面的JS來

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

當然，如果只會工作的這個我想您要設置的變量是父頁面上的全局變量。我很久沒有這樣做過，但我相信這可以做到。

Answer 2

這是一個有點簡單的比你想：

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

只是對待iframe作爲新document元素。