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

【问题标题】：How to trigger onchange event in an IFrame mithril element when a codemirror editor in the srcdoc of the IFrame changes?当 IFrame 的 srcdoc 中的代码镜像编辑器发生更改时，如何在 IFrame 秘银元素中触发 onchange 事件？
【发布时间】：2021-02-21 22:42:25
【问题描述】：

假设我有一个名为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 元素。这个的 sn-p 看起来像

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 事件中从 codemirror 编辑器中获取文本。但我不知道每次在编辑器中发生更改时如何触发 IFrame 的 onchange 事件。

我秘银 dom 中的 addEventListener，似乎没有听从编辑 onchange 触发的 postMessage。（我也试过window.parent.postMessage 也没有用）。

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

【问题讨论】：

标签： javascript html jquery codemirror mithril.js

【解决方案1】：

script 标签中的代码似乎给出了SyntaxError，错误状态为SyntaxError: expected property name, got '{' 这是因为您的Window.onload 函数有两个左括号，而您的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'}, '*')
  });
}

现在每次发生变化时都会调用window.postMessage

【讨论】：

感谢您指出错误。但不幸的是，它只是一个错字。我已经更新了我的问题。它仍然不会触发 onchange 事件。 :(