如何使用javascript将值从父级传递到其iframe

Question

嗨，我想通过将父链接页面值调用到其 iframe 链接页面示例代码来传递该值

<html>
    <head>
        <title>
        </title>
        <script>
            function sendvalue(v){
                alert(v);
            }
        </script>
    </head>
    <body>
        <form id="f">
            <input type="button" value="123" onclick="sendvalue(this.value)">
        </form>
        <iframe id="frame1" src="a.html" width="500px;"></iframe>
    </body>
</html>

一个.html

<html>
    <head>
        <title>
        </title>
        <script>

        </script>
    </head>
    <body>
        <h3> Frame</h3>
        <form id="myform">
            Req value <input type="text" name="a" id="a">
        </form>
    </body>
</html>

当我调用 sendvalue 函数时，该值应该以输入字段的形式传递给 iframe 链接页面。 这是如何实现的。

Answer 1

您可以使用postMessage在 2 个 iframe 之间进行通信。

在父框架上，您需要使用iframeEl.contentWindow.postMessage(value as a string, can be json.stringified value)抓取 iframe 的窗口

在子框架上，您需要添加message类型的事件，如下所示：

window.addEventListener('message', function(dataPassed) {
   //Your logic here.
})

有关更多信息，请阅读

Answer 2

<html>
<head>
<title>
</title>
<script>
function sendvalue(v){
document.getElementById('va').value = v;
window.frames['framename'].document.getElementById("a").value = v


}
</script>
</head>
<body>
<form id="f">
 <input type="button" value="123" onclick="sendvalue(this.value)">
 <input type="text" name="va" id="va">
</form>
<iframe  name="framename" src="a.html" width="500px;"></iframe>
</body>
</html>

一个.html

<html>
<head>
<title>
</title>
</head>
<body>
<h3> Frame</h3>
<form id="myform">
Req value <input type="text" name="a" id="a">
</form>
</body>
</html>

Answer 3

将它添加到您的 Iframe 的最佳方式

<iframe id="frame1" src="a.html?data=SomeData" width="500px;"></iframe>

在 iframe 中，您可以通过设置变量来获取信息

var MYDATA = location.href.split('=')[1].split('&');

（你会看到MYDATA=SomeData ）

如何使用javascript将值从父级传递到其iframe

问题描述

3 个解决方案

解决方案1
2 2017-09-13 05:07:05

解决方案2
0 2017-04-11 11:51:35

解决方案3
0 2017-09-12 21:24:42

如何使用javascript将值从父级传递到其iframe

问题描述

3 个解决方案

解决方案1 2 2017-09-13 05:07:05

解决方案2 0 2017-04-11 11:51:35

解决方案3 0 2017-09-12 21:24:42

解决方案1
2 2017-09-13 05:07:05

解决方案2
0 2017-04-11 11:51:35

解决方案3
0 2017-09-12 21:24:42