我可以在 iframe 上使用 postMessage,谁的 html 通过 - srcdoc 属性传递?

Ank*_*aha 3 html javascript iframe

我无法调用 postMessage,以防我在 srcdoc 属性中传递 html

如果没有 sandbox = "allow-scripts" ,它会给出以下错误

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://example.com') does not match the recipient window's origin ('https://example.com:444').


sandbox = "allow-scripts" ,它给出以下错误

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://example.com') does not match the recipient window's origin ('null').


我想在没有沙箱属性的情况下调用postMessage,可以吗?

如果没有,还有其他办法吗?

Kai*_*ido 7

你当然可以。

您的错误消息抱怨的问题是您确实将target-origin的参数设置Window.postMessage( message, target-origin, transferable )为无效值。
您没有显示您的代码,但如果我必须猜测,我会说您根本没有设置它,因此它默认为您当前页面的来源。

由于您的目标框架没有srcbutsrcdoc属性,因此它的位置将为about:srcdoc且其来源将为,因此除postMessage 之外的null任何其他值都会导致请求失败。您必须将其设置为"*"target-origin
"*"

frame.onload = (e) => {
  frame.contentWindow.postMessage( 'hello frame', '*' );
};
Run Code Online (Sandbox Code Playgroud)
<iframe id="frame" srcdoc="
  <html>
  <body>
  <pre id='log'></pre>
  <script>
    const log = document.getElementById( 'log' );
    onmessage = (e) => log.textContent = e.data;
  </script>
  </body>
  </html>
"></iframe>
Run Code Online (Sandbox Code Playgroud)