如何从父页面获取对 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时，我显示一个包含iframe作为模式块的 div。 这时我想通过调用 Code-mirror 实例来初始化Code-mirror 。

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

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

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

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

从 parent.html 调用那些全局即时和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>

父母.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 的引用？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-02-19 14:03:11

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-02-19 14:03:11

解决方案1
0 已采纳 2022-02-19 14:03:11