当 IFrame 的 srcdoc 中的代码镜像编辑器更改时，如何在 IFrame 秘银元素中触发 onchange 事件？

编程问答 2022-05-24

问题描述

假设我有一个名为 post.html 的 HTML，其中包含一个 codemirror 编辑器。 post.html 看起来像：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.3/mode/python/python.min.js"></script>
    </head>
    <body>
        <textarea id="editor">Hello World</textarea>
    </body>

<script>
window.onload = function () {
    var editor = CodeMirror.fromTextArea($("#editor")[0],{
        lineNumbers: true,lineWrapping: false,});

    editor.on('change',(editor) => {
        window.postMessage({'data': 'some data'},'*')
        // somehow trigger the IFrames onchange event??
    });

}
</script>
</html>

我有一个 mithril IFrame 元素。这个片段看起来像

mithrilIFrame = {
    oncreate: function(vnode) {
        vnode.dom.addEventListener("message",function(event) {
              console.log("event found in listen!",event);
            });
    },view: function(vnode) {
        data.src = "post.html";
        data.onchange = myFunc;

        return m("iframe",data);
    }
};

myFunc = function(){
    // get the text from the codemirror editor and do something with it
}

现在，每当在 codemirror 编辑器中输入新文本时，我都想在我的 mithril IFrame 元素中触发 onchange 事件，该事件会在 codemirror 编辑器中获取文本并对该文本执行一些操作。我知道如何在 onchange 事件中从代码镜像编辑器中获取文本。但我无法弄清楚每次编辑器中的某些内容发生更改时如何触发 IFrame 的 onchange 事件。

我的秘银 dom 中的 addEventListener 似乎没有监听由编辑器 postMessage 触发的 onchange。 （我也试过 window.parent.postMessage 它也没有帮助）。

请帮忙。我一窍不通。另外，我不是 js、jquery 或 mithril 方面的专家，所以请原谅我可能犯的任何非常愚蠢的错误

解决方法

script 标签中的代码似乎给出了 SyntaxError，错误指出 SyntaxError: expected property name,got '{' 这是因为您的 Window.onload 函数有两个左括号，而您的 { {1}} 对象再次有两个左括号。该错误是每次在编辑器中更改某些内容时都无法触发 CodeMirror.fromTextArea 事件的原因。

脚本标签中的代码应该是这样的

onchange

现在每次发生变化时 window.onload = windowLoad; function () { var editor = CodeMirror.fromTextArea($("#editor")[0],{ lineNumbers: true,lineWrapping: false,}); editor.on('change',(editor) => { window.postMessage({'data': 'some data'},'*') }); } 都会被调用

htmljavascriptjquerymithril.js