代码之家 › 专栏 › 技术社区 › Kesavan R

window.parent.postmessage不使用iframe中的scr=“'data:text/html;charset=utf-8”

angularjs html javascript

Kesavan R · 技术社区 · 6 年前

我试图创建一个小编辑器,允许用户使用iframe编辑HTML。所以将html字符串作为数据传递到src:text/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);

1 回复 | 直到 6 年前

6 年前

Typo:

事件被调用 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>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前