Question

我正在尝试创建一个小型编辑器，允许用户使用iframe编辑html。因此将html字符串作为data：text / html传递到src中。但通讯未发生在父窗口中。

帮助我我做错了。

index.html

<iframe id="creditMailBody"  class="iframe-main-content" src="{{creditMail.content}}"></iframe>

以html字符串

<html>
<head>
</head>
<body>
<p id="editor" contentEditable="true"></p>
</body>
<script>
  document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
    window.parent.postMessage('iframe_message', '*')
  }, false);
 </script>
</html>

在控制器中

window.addEventListener('iframe_message', function() {
  console.log('iframe message')
}, true);

Answer 1

错别字：

该事件称为message，而不是iframe_message：

const frame_content = `<html>
<head>
</head>
<body>
<p id="editor" contentEditable="true">edit me</p>
</body>
<script>
  document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
    window.parent.postMessage('iframe_message', '*')
  }, false);
 <\/script>
</html>`;
frame.src = 'data:text/html,' + encodeURIComponent(frame_content);

window.addEventListener("message", function() {
                      //  ^-- Here it is "message"
  console.log('iframe message')
});

<iframe id="frame"></iframe>

window.parent.postMessage无法在iframe中与scr =“'data：text / html; charset = utf-8”一起使用

1 个答案:

错别字：