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添加到输入中并进行呈现

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

1 个答案: