Javascript 使用postMessage的帧间通信_Javascript_Html_Iframe_Browser

Javascript 使用postMessage的帧间通信

javascript html iframe browser

Javascript 使用postMessage的帧间通信,javascript,html,iframe,browser,Javascript,Html,Iframe,Browser,我有一个域a（）的父页面在父页面上存在两个iFrame，它们是相同的域，但不是域A.（）当父对象是example.com时，有没有办法将值从一个test.com iframe传递到另一个，或者我描述的行为违反了iframe的“规则” 感谢您签出此命令，我模拟了跨域iFrame以使其更具可读性。基本上，这两个框架的顶部父级充当中介，将消息重新分派到目标框架，但框架会触发所有操作和响应 HTML JavaScript var frame_one = document.getElementBy

我有一个域a（）的父页面

在父页面上存在两个iFrame，它们是相同的域，但不是域A.（）

当父对象是example.com时，有没有办法将值从一个test.com iframe传递到另一个，或者我描述的行为违反了iframe的“规则”

感谢您签出此命令，我模拟了跨域iFrame以使其更具可读性。基本上，这两个框架的顶部父级充当中介，将消息重新分派到目标框架，但框架会触发所有操作和响应

HTML

JavaScript

var frame_one = document.getElementById('one');
var frame_two = document.getElementById('two');

// The parent has to mediate because cross-domain sandboxing
// is enabled when on different domains, plus backwards compatible.
window.addEventListener('message', function (m) {
    // Using an object with a 'frame' property that maps to the ID
    // which could be done as you would like.
    var targetFrame = document.getElementById(m.data.frame);
    targetFrame.contentWindow.postMessage(m.data.message, '*');
}, false);


/**
 * This is just to illustrate what a normal document would look
 * like you should just set the normal 'src' attribute and the
 * string would be the normal HTML of the documents.
 */
frame_two.srcdoc = '<!DOCTYPE html>\
<html>\
<head>\
<script>\
window.addEventListener("message", function (m) {\
alert("Frame Two Says: " + m.data);\
}, false);\
window.addEventListener("load", function () {\
window.parent.postMessage({frame: "one", message: "Received message from frame two!"}, "*");\
}, false);\
</script>\
</head>\
<body>\
two\
</body>';

frame_one.srcdoc = '<!DOCTYPE html>\
<html>\
<head>\
<script>\
window.addEventListener("message", function (m) {\
alert("Frame One Says: " + m.data);\
}, false);\
window.addEventListener("load", function () {\
setTimeout(function () {\
window.parent.postMessage({frame: "two", message: "Received message from frame one!"}, "*");\
}, 1500);\
}, false);\
</script>\
</head>\
<body>\
one\
</body>';

var frame_one=document.getElementById（'one'）；
var frame_two=document.getElementById（'two'）；
//父级必须进行调解，因为跨域沙箱
//在不同域上启用，并且向后兼容。
window.addEventListener（'message'，函数（m）{
//使用具有映射到ID的“frame”属性的对象
//你想怎么做就怎么做。
var targetFrame=document.getElementById（m.data.frame）；
targetFrame.contentWindow.postMessage（m.data.message，'*'）；
}，假）；
/**
*这只是为了说明普通文档的外观
*就像您应该只设置普通的'src'属性和
*字符串将是文档的普通HTML。
*/
frame_two.srcdoc=\
\
\
\
window.addEventListener（“消息”，函数（m）{\
警报（“第二帧显示：“+m.data”）\
}，假）\
addEventListener（“加载”，函数（）{\
window.parent.postMessage（{frame:“one”，message:“从第二帧接收到消息！”}，“*”\
}，假）\
\
\
\
两个\
';
frame_one.srcdoc='1\
\
\
\
window.addEventListener（“消息”，函数（m）{\
警报（“第一帧显示：“+m.data”）\
}，假）\
addEventListener（“加载”，函数（）{\
setTimeout（函数（）{\
window.parent.postMessage（{frame:“two”，message:“从frame one收到消息！”}，“*”\
}, 1500);\
}，假）\
\
\
\
一个\
';

这是一个重复的问题，你只想做跨域postMessage，你可以看看这个：你不正确，这不是该问题的重复。我想在一个iframe中发布消息，并将其发送到另一个iframe，独立于父窗口。这些都帮不了我。好吧，我明白了，在这种情况下，你不能从一个兄弟姐妹到另一个兄弟姐妹。您需要做的是让父级侦听每个帧中的事件，然后将其发送到另一个帧，因此只需要一个普通的中介。如果您使用支持HTML5的浏览器（IE10+），您实际上可以使用沙箱，通过window.parent获取不同的窗口，但在旧浏览器中不支持这种方式，因此，我建议使用调解人方法。当使用window.parent时，您会得到父级的DOM树，并且可以查找您想要与之通信的iframe.contentWindow。如果您告诉我您支持哪些浏览器，我可以发布适当的详细信息，并使用示例进行JSFIDLE。非常感谢。我试一下，看看有没有问题。真的很感谢Joseeght谢谢你的解决方案。有没有办法在父页面上运行0个额外代码？iFrame之间的直接通信？或者这是不可能的。嗯，不是真的，这是因为当你有一个跨域的框架，你不能访问父代的DOM，因为这是由浏览器沙盒，没有真正的办法。您可能希望查看WebSocket，然后您可以使用服务器作为中介，但在任何情况下，如果它们是跨域的，那么您将无法执行iFrame到iFrame。首先，您可以控制父页面吗？如果您这样做，您可以通过代理在与父级相同的域上运行iframe，因此理论上它们在同一域上，然后将为您提供DOM访问权限。

var frame_one = document.getElementById('one');
var frame_two = document.getElementById('two');

// The parent has to mediate because cross-domain sandboxing
// is enabled when on different domains, plus backwards compatible.
window.addEventListener('message', function (m) {
    // Using an object with a 'frame' property that maps to the ID
    // which could be done as you would like.
    var targetFrame = document.getElementById(m.data.frame);
    targetFrame.contentWindow.postMessage(m.data.message, '*');
}, false);


/**
 * This is just to illustrate what a normal document would look
 * like you should just set the normal 'src' attribute and the
 * string would be the normal HTML of the documents.
 */
frame_two.srcdoc = '<!DOCTYPE html>\
<html>\
<head>\
<script>\
window.addEventListener("message", function (m) {\
alert("Frame Two Says: " + m.data);\
}, false);\
window.addEventListener("load", function () {\
window.parent.postMessage({frame: "one", message: "Received message from frame two!"}, "*");\
}, false);\
</script>\
</head>\
<body>\
two\
</body>';

frame_one.srcdoc = '<!DOCTYPE html>\
<html>\
<head>\
<script>\
window.addEventListener("message", function (m) {\
alert("Frame One Says: " + m.data);\
}, false);\
window.addEventListener("load", function () {\
setTimeout(function () {\
window.parent.postMessage({frame: "two", message: "Received message from frame one!"}, "*");\
}, 1500);\
}, false);\
</script>\
</head>\
<body>\
one\
</body>';