javascript - iframe 在通过 srcdoc 更新后删除 CSS - 如何使添加的 CSS 持久化

Question

我正在尝试为实时文本编辑器实现“亮/暗模式”功能，但是由于使用了 srcdoc，iframe 刷新并删除了通过 JQuery 应用到它的任何 CSS。我希望能够将 CSS 保留在 iframe 的内容中。

我尝试对框架的内容使用 .css()，这很有效，但由于我在每个 keyUp 事件上刷​​新框架，CSS 被刷新并且不再应用。

附加样式表似乎也会导致它在刷新时被“清除”。

如何让 CSS 保持应用于框架？

HTML

<div>
    <textarea id="text-input" onkeyup="refresh()" placeholder="Enter your code here.."></textarea>
</div>
<div>
    <iframe id="output-display"></iframe>
</div>

Javascript

function refresh(){
 var input = document.getElementById('text-input').value;
 document.getElementById('output-display').srcdoc = input;
}

$(document).ready(function(){
  $('#output-display').contents().find('body').css('color', 'white');
});

编辑:

这样做的目的是成为一个实时编辑器，允许用户在左侧(文本区域)输入一些代码，并在右侧(iframe)显示结果

Answer 1

好的，所以我认为您实际上不必使用 iframe 来完成您在这里的目标。您可以只使用常规的 html 元素并在每次按键时设置内容。请参阅下面的代码片段以供引用:

var isDark = false;
function toggleTheme() {
  if(isDark) {
    $('#output-display').css({'background-color': 'black', 'color': 'white'});
    isDark = false;
  } else {
    $('#output-display').css({'background-color': 'white', 'color': 'black'});
    isDark = true;
  }
}

function refresh() {
  var inputValue = document.getElementById('text-input').value;
  var parsedHtml = $.parseHTML(inputValue, document, true);
  $('#output-display').html($(parsedHtml));
}
toggleTheme();
refresh();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="button" onclick="toggleTheme()" value="Toggle Theme" />
<br>
  <textarea id="text-input" onkeyup="refresh()" placeholder="Enter your code here.."></textarea>
</div>
<div>
  <div style="border: 1px solid black; width: 500px; height: 300px" id="output-display" disabled></div>
</div>

编辑:添加了主题切换以进一步说明如何使用它。

EDIT2: 添加了 .parseHTML 以便您可以将 html 添加到输入并呈现它