是否有办法注入外部样式表到iframe?

Question

我有一个网站，在页面的一侧有一个编辑器，左边有一个iframe。目前，当您在编辑器中输入HTML代码时，iframe会在键盘上自动更新。我希望在编辑器中输入的代码在iframe内具有默认样式。因为这是一款需要你输入HTML标签的游戏，所以将被设置样式的内容都是默认标签(如h1, p,div等)。因此，我不能在HTML文档中使用样式，因为它会对整个页面上的项进行样式设置，而不仅仅是iframe中的项。我想有一个外部的样式表，是包含在iframe，所以我可以样式标记，而不影响index.html页面。

<style>
* {
padding: 0;
margin: 0;
}

html {
display: flex;
justify-content: center;
}
h2 {
color: rgba(255, 255, 255, 0);
width: 300px;
height: 50px;
margin: 10px;
background-color: crimson;
}
</style>
<iframe src="" frameborder="0" class="iframe"></iframe>

JS

editor.addEventListener('keyup',()=>{
var html = editor.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html) + "<style>" + style.textContent + "</style>";
});

Answer 1

当然可以。它们是两个不同的文件。

var style = "h1{color:red}";
var iframe = document.querySelector("iframe");
var html = "<h1>hello world</h1>";
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html) + "<style>" + style + "</style>";

h1 {
color: blue;
}
iframe {
border: 1px solid black;
}

<h1>hello world</h1>
<iframe src="" frameborder="0" class="iframe"></iframe>

如果你坚持使用外部css，那么在iframe的HTML中添加<link rel="stylesheet" href="https://example.com/style.css">而不是<style>标签。