如何从父页面的 iframe 中获取对 Codemirror 的引用？

Question

我有一个 parent.html 页面，我在 div 元素中嵌入了一个 Iframe 并且 iframe 的 src 引用了一个 codemirror.html 页面显示代码镜像。

<div id="cmModal" class="modal">
<div class="modal-content">
  <span class="close">&times;</span>
  <iframe id="cmIframeId" name="cmiframe" src="../html/codemirror.html"></iframe>
</div></div>

当我单击 button 时，我会显示一个 div，其中包含 iframe 作为模态块。这时我想通过调用Code-mirror实例来初始化Code-mirror。

如何从 parent.html 初始化 CodeMirror 内容？

我做了什么仍然无法初始化codemirror:

在 codemirror.html 页面上声明了 codemirror 的全局实例和全局函数。

var codeMirrorEditor; 
window.setCode = function(content) {
    codeMirrorEditor.setValue(content);;
}

从 parent.html

调用那些全局瞬间和函数

 function openCodeMirror(){
            // Get the modal
            var modal = document.getElementById("cmModal");
            modal.style.display = "block";

            var iframe = document.getElementById("cmIframeId");
            iframe.contentWindow.setCode('My initial value');
            iframe.contentWindow.codeMirrorEditor.setValue('My initial value')
        }

codemirror.html

<!doctype html>
<html lang="en">
<head>
    <title>CodeMirror: HTML EDITOR</title>
// all codmirror addons and script comes here ...
</head>
<body>
<div id="code" ></div>

<script>
    var codeMirrorEditor; 
    window.setCode = function(content) {
        codeMirrorEditor.setValue(content);;
    }  

    window.onload = function () {
        codeMirrorEditor = CodeMirror(document.getElementById("code"), {
            mode: "text/html",
            styleActiveLine: true,
            lineNumbers: true,
            lineWrapping: true,
            autoCloseTags: true,
            theme: "night",
            value: getOwnSource(),
        });         
    };

    function setContent(content) {
        codeMirrorEditor.setValue(content);
    }

    function getContent() {
        return codeMirrorEditor.getValue();
    }

    function getOwnSource() {
        return document.documentElement.innerHTML;
    }

</script>

</body>
</html>

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/modal.css">
</head>
<body>

<textarea id="source" style="width:100%; height:400px"> initial text comes from here </textarea><br>
<input type="button" value="open codemirror" onclick="openCodeMirror()"> </input>

<!-- The Codemirror Modal window-->
<div id="cmModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <iframe id="cmIframeId" name="cmiframe" src="../html/codemirror.html" style="width:100%; height:300px"></iframe>
  </div>
</div>

<script>
function openCodeMirror(){
      var modal = document.getElementById("cmModal");
      modal.style.display = "block";

      var iframe = document.getElementById("cmIframeId");
      let textarea = document.getElementById("source");
                
     iframe.contentWindow.codeMirrorEditor.setValue(textarea.value);
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() {
        modal.style.display = "none";
    }

  }

</script>

</body>
</html>

modal.css 对于 parent.html

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
/*   background-color: #ff8000; */
  background-color:#fefefe ;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  
/*   padding: 10px; */
  border: 1px solid #888;
  width: 100%;
  height:100%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 32px;
  font-weight: bold;
  margin-right: 10px;
/*   border: 1px solid #ff0000; */
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

Answer 1

伙计们，它就像魅力一样，这只是我混合代码的错误。清理代码后，它可以正常工作。感谢大家，希望能帮到别人解决其他问题。

如何从父页面的 iframe 中获取对 Codemirror 的引用？

How to get reference to Codemirror inside an iframe from parent page?

html

javascript

css

codemirror