设置外部 iframe 内输入字段的值

Set value of input field inside an external iframe

本文关键字：字段 输入 外部 iframe 设置      更新时间：2023-09-26

我知道这个问题已经被问了很多次，但每个人都要求它来满足自己的需求，所以找不到帮助我的答案

我有两个站点，可以访问这两个站点，并且可以在两个站点中添加所需的任何内容

我的第一个网站

http://www.mysite1.com

在这个网站上

我有具有特定值的文本字段我有一个 iFrame，其内容来自我的其他网站。

<input type='text' name='test1' value='5'>
<iframe name='myframe' src='http://www.mysite2.com/index.php'></iframe>

在此页面上

http://www.mysite2.com/index.php

我有输入文本字段

我想要实现的是：

将特定值从我的第一个网站获取到我的第二个网站的输入字段

由于操作具有不同原点的帧将导致发生跨源错误，因此您必须使用 window.postMessage() 方法向子<iframe>发送消息，并在子内部侦听window.onmessage并处理消息。

下面是一个示例，假设您有一个这样的 DOM 结构：

  • 网站 #1 （www.mysite1.com）：

    <body>
    <iframe id="site2-frame" src="http://www.mysite2.com/index.php"></iframe>
</body>

  • iframe 中的站点 #2 （www.mysite2.com）：

    <body>
    <input id="input-field" />
</body>

然后在您的网站 #1 中，您必须向框架发送一条消息，如下所示：

var frame = document.getElementById('site2-frame');
frame.contentWindow.postMessage('Something something something', '*');

在您的网站#2中，即框架内的站点，您将收听消息并设置数据：

var input = document.getElementById('input-field');
window.addEventListener('message', function(e) {
    // Check the origin, accept messages only if they are from YOUR site!
    if (/^http':'/'/www'.mysite1'.com/.test(e.origin)) {
        input.value = e.data; 
        // This will be 'Something something something'
    }
});

JCOC611是对的。在现代Web开发中，Window.postMessage是要走的路。在 iframe 中选择元素并更改其值非常容易导致跨源安全错误 - 这是有充分理由的。

下面是一个示例，如何使用 postMessage 事件模式实现跨站点/iframe 交换值：

<script>
window.onload = function(){
    // Define the target
    var win = document.getElementById('iframe').contentWindow;
    // Define the event trigger
    document.getElementById('form').onsubmit = function(e){
        // Define source value or message
        win.postMessage(document.getElementById('source').value);  
        e.preventDefault();
    };
};
</script>
<form id='form'>
    <input id="source" type='text' value='5'>
    <input type='submit'/>
</form>

<iframe name='myframe' src='http://www.mysite2.com/index.php'>
    <!-- This is what happens inside the iframe -->
    <form id='form'>
        <input id='target' type='text' value=''>
    </form>
    <script>
        // Wait for the message
        document.addEventListener('message', function(e){
            // When you receive the message, add it to the target
            document.getElementById('target').textContent = e.data;
        }, false);
    </script>
</iframe>

您始终可以使用 iframe url 查询字符串名称值对发送变量，然后在页面加载时根据需要填充变量或输入字段。

相关文章：