我知道这个问题已经被问了很多次,但每个人都要求它来满足自己的需求,所以找不到帮助我的答案
我有两个站点,可以访问这两个站点,并且可以在两个站点中添加所需的任何内容
我的第一个网站
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 查询字符串名称值对发送变量,然后在页面加载时根据需要填充变量或输入字段。