有没有办法将编写在代码镜像中的 css 应用于 iframe 的 html 内容？

Posted 2023-04-13

【中文标题】有没有办法将编写在代码镜像中的 css 应用于 iframe 的 html 内容？

【英文标题】：Is there a way to apply css written in a code mirror to the html contents of an iframe?

【发布时间】：2019-11-30 16:33:06

【问题描述】：

我有两个代码镜像文本区域，一个用于 html，一个用于 css。在按下按钮时，我想将 html 和 css 输出到 iframe 中。即我想要一些粗体的绿色文本。这将由写入文本区域的 css 和 html 驱动。

我尝试将 iframe 的 css 和 html 属性作为目标，这适用于 html 但不适用于 css。

  $("#create").click(function () 
        $("#iframe").contents().find("body").html("");
        var htmlEditor = $('.CodeMirror')[0].CodeMirror;
        var cssEditor = $('.CodeMirror')[2].CodeMirror;
        $("#iframe").contents().find("body").html(htmlEditor.getValue());
        $("#iframe").contents().find("body").css(cssEditor.getValue());
    );

在数组中的位置 1 处还有一个 javascript 编辑器，用于页面上的代码镜像，但这是另一个问题。

https://imgur.com/H9KgWf4

正如您从我的第一次尝试中看到的那样，文本显示为粗体，但粗体标记没有应用 css 修改。我觉得我不了解 iframe 以及它如何正常工作。我尝试对标签应用一个类，但没有得到任何结果。

【参考方案1】：

我找到的解决方案是将要应用的 css 附加到头部

$('#iframe').contents().find("head").append($("<style type='text/css'>" + cssEditor.getValue() + "</style>"));

如果有人有更好的解决方案，请发帖，我会很感兴趣的！

【讨论】：

您还应该使用.empty() 删除内容并在更改编辑器后重新附加它们。