我正在开发一个项目，我们的网络应用程序需要通过 postMessage 协议(protocol)与第三方应用程序集成。为了便于说明，假设这是代码，它运行得很好:
<html>
<head>
<script>
var ovsDomain = '3rd.party.vendor',
ovsOrigin = 'https://' + ovsDomain,
ovsApiUrl = ovsHost + '/webapi.html';
function begin() {
var ovsFrame = document.getElementById( 'ovs' );
if ( window.postMessage ) {
if ( window.addEventListener ) {
window.addEventListener( 'message', onMessage );
} else {
window.attachEvent( 'onmessage', onMessage );
}
}
ovsFrame.src = ovsApiUrl + '#' + encodeURIComponent( document.location.href );
ovsFrame.contentWindow.postMessage( JSON.stringify( {
cmd: 'initialize',
session: 'test_session'
} ), ovsOrigin );
}
function post() {
var ovsFrame = document.getElementById( 'ovs' ),
msg = JSON.stringify( {
cmd: 'send',
data: 'test data'
} );
ovsFrame.contentWindow.postMessage( msg, ovsHost );
}
function end() {
var ovsFrame = document.getElementById( 'ovs' );
ovsFrame.contentWindow.postMessage( JSON.stringify( {
cmd: 'close'
} ), ovsOrigin );
}
function onMessage( evt ) {
var data,
ovsFrame = document.getElementById( 'ovs' );
if ( evt.origin === ovsHost && ovsFrame.contentWindow === evt.source ) {
try {
data = JSON.parse(evt.data);
} catch ( e ) {
alert( 'bad data' );
}
switch ( data.msg ) {
case 'close':
alert( 'closed' );
break;
case 'initialized':
alert( 'initialized' );
break;
}
}
}
</script>
</head>
<body>
<input type='button' value='Begin' onclick='begin()' />
<input type='button' value='Post' onclick='post()' />
<input type='button' value='End' onclick='end()' />
<iframe id='ovs' sandbox='allow-scripts allow-same-origin allow-popups' src='https://3rd.party.vendor/webapi.html' style='display:none'></iframe>
</body>
</html>
我想根据a)是否启用该功能以及b)我们正在使用的特定客户端和/或 vendor API的URL应该是什么来有条件地创建/加载iframe元素。因此，我尝试从 HTML 文档中删除静态 iframe，并在开始函数中添加以下调整:
function begin() {
var ovsFrame = document.createElement( 'iframe' );
if ( window.postMessage ) {
if ( window.addEventListener ) {
window.addEventListener( 'message', onMessage );
ovsFrame.addEventListener( 'load', onFrameLoad );
} else {
window.attachEvent( 'onmessage', onMessage );
ovsFrame.attachEvent( 'load', onFrameLoad );
}
}
ovsFrame.id = 'crs';
ovsFrame.src = ovsOrigin;
document.body.appendChild( ovsFrame );
}
function onFrameLoad() {
var ovsFrame = document.getElementById( 'ovs' );
ovsFrame.src = ovsApiUrl + '#' + encodeURIComponent( document.location.href );
ovsFrame.contentWindow.postMessage( JSON.stringify( {
cmd: 'initialize',
session: 'test_session'
} ), ovsOrigin );
}
iframe 已创建并添加到 DOM。初始 URL 已加载，但 API 想要创建的弹出窗口被阻止。更重要的是，我尝试发布消息被阻止:
无法在“DOMWindow”上执行“postMessage”:提供的目标源(“https://3rd.party.vendor”)与收件人窗口的源(“https://althost.meditech.com:4433”)不匹配。
我的理解是，因为我在文档中创建了 iframe，所以它继承了我文档的域。一旦完成，我就无法将其强制设置为 OV 的域，例如
ovsFrame.contentWindow.document.domain = ovsDomain;
因为OV域名与我的无关。
对于我能找到的所有文档，没有任何地方明确指出您不能执行此操作(创建动态元素)，尽管我没有找到一个示例，其中有人在 HTML 中没有静态 iframe 元素，因此它开始感觉自己是那些我不知道的肮脏小 secret (或传统智慧花絮)之一。
任何建议都将不胜感激，即使它确认无法完成。 我已阅读同源策略文档并
最佳答案
我已经确定了解决此问题的方法，以防其他人遇到此问题并需要解决方案。动态创建 iframe 元素将继承脚本页面的起源；因为这是我的页面，所以我可以加载我托管的 HTML 文档，这将静态加载第 3 方 iframe。一旦我混合了这个新页面，我就可以使用 window.postMessage 通过新页面与第 3 方页面进行通信，实际上通过我的可信来源代理通信。感觉有点笨重，但看起来很合理并且有效。
关于javascript - 如何创建与 postMessage 一起使用的动态 iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38599224/