Question

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

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

我的第一个网站

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

我有输入文字字段

我想要实现的目标是：

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

Answer 1

由于操纵具有不同来源的帧将导致发生跨源错误，因此您必须使用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'
    }
});

Answer 2

JCOC611是对的。在现代网络开发中Window.postMessage是可行的方法。选择iframe中的元素并更改其值非常会导致跨源安全性错误 - 这是有充分理由的。

以下是一个示例，您将如何使用postMessage事件模式实现跨site / 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>

Answer 3

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

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

3 个答案: