如何从 iframe 按钮提交填充父页面内的文本输入？

Question

这听起来像是一项简单的任务，但我发现解决方案出奇地难以确定。

我想要做的就是使用 iframe 中的数据填充父 window 中的文本输入框，使用 iframe 中的按钮单击。是的，两个页面都在同一个域中。

使用原始 JS、Jquery、Ajax 等尝试了各种解决方案，但没有任何乐趣。我找到了填充 <div> 容器的解决方案，但将相同的目标 ID 应用于文本输入不起作用。

我也成功地从父页面使用这个 Jquery 脚本将数据发送到 iframe，但不知道如何执行反向操作（iframe 到父页面）

<script> 
    $(document).ready(function(){
        $('#submit').click(function(){
            var iframe = document.getElementById('myiframe');
            var doc = iframe.contentDocument || iframe.contentWindow.document;
            var elem = document.getElementById('source');
            doc.getElementsByName('target')[0].value = elem.value;
        });
    });
</script>

简化的设置。

parent.html:

<!DOCTYPE html>
<html>
<body>

<iframe id="myiframe" frameborder="1" src="child.html"></iframe>

<form>
Iframe data populates here: <input type="text" name="target" id="target"> 
</form>

</body>
</html>

child.html:

<!DOCTYPE html>
<html>
<body>

<form>
Iframe data is input here:  <input type="text" name="source" id="source"> 
<button type="button" onclick="functionToSendSourceToParent();">
</form>

</body>
</html>

Answer 1

是不是很简单？在本地除了 Chrome 是这样工作的：

parent.html:

<!DOCTYPE html>
<html>
<body>

<iframe id="myiframe" frameborder="1" src="child.html"></iframe>

<form>
Iframe data populates here: <input type="text" name="target" id="target"> 
</form>

</body>
</html>

child.html

<!DOCTYPE html>
<html>
<script>
function functionToSendSourceToParent() {
    var inp = document.getElementsByName("source")[0].value;
    parent.document.getElementsByName("target")[0].value = inp;
}
</script>
<body>

<form>
Iframe data is input here:  <input type="text" name="source" id="source"> 
<button type="button" onclick="functionToSendSourceToParent();">Send2Parent</button>
</form>

</body>
</html>

Chrome 控制台报告：

child.html:6 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.<br/>
    at functionToSendSourceToParent (file:///X:/child.html:6:12)<br/>
    at HTMLButtonElement.onclick (file:///X:/child.html:13:65)<br/>

如何从 iframe 按钮提交填充父页面内的文本输入？

How do I populate a text input inside the parent page from an iframe button submit?

javascript

iframe

parent