使用页面.css文件将CSS添加到iframe元素

Question

首先，似乎有很多帖子都有相同类型的标题，但没有一个专注于我所面临的问题。这就是为什么我打开这个新问题的原因，我希望这个标题是明确的。

我正在自己编写一个文本编辑器，我最初使用的是<textarea>，但我想为我正在编写的元素添加各种样式。在阅读了很多相关主题后，我决定将<textarea>更改为<iframe>。

在尝试任何新的设计或其他任何内容之前，我希望对此<iframe>和我之前的<textarea>采取相同的行为。但我面临一个问题：

我的<iframe>元素位于 index.html 页面中，该页面与CSS文件 style.css 相关联。我可以在 style.css 中更改框架的全局<iframe>设计（如宽度，高度，边框...），但我无法添加特殊设计使用我在 style.css 中添加的属性的{{1>}元素 。

我在检查器中看到iframe在任何标记之前都有<iframe>

但即使我尝试将这个奇怪的标签添加到CSS中，该样式也不会应用于我想要更改的元素。

简而言之，我的问题是：是否可以在主页的样式表文件中为iframe中的元素添加一些样式？

以下是我的代码的一些相关部分，其中显示了我想要执行的操作：将自定义字体添加到#document内的<p>标记。

＆＃13;

＆＃13;

<iframe>

＆＃13;

window.onload = function() {
  var frameElement = document.getElementById("text-field");
  var doc = frameElement.contentDocument;
  doc.body.contentEditable = true;
}  

＆＃13;

html, body {
	margin : 0px;
	background : #f5f5f5;
	font-family: 'Roboto', sans-serif;
}

input:focus, textarea:focus {
	outline: none;
}

.text-editor {
	min-width : 800px;
	width : 1200px;	
	max-width : 1600px;
	min-height : 400px;
	height : 850px;
	max-height : 850px;
	background : #f0f0f0;
	box-shadow : 0px 1px 4px #ccc;
	margin : auto;
	overflow:auto
}

.text-editor .text-field {
	display : block;
	background-color : white;
	min-height : 300px;
	height : 600px;
	max-height : 600px;
	width : 90%;
	margin : auto;
	padding : 5px;
	border: 1px solid #ccc;
}

.text-editor .text-field #document html body {
	font-family: 'Source Code Pro', monospace;
	font-size : 14px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

来自父级的样式不会应用于iframe中的文档。最好的解决方案是将样式表添加到iframe中的文档。通过javascript或创建模板页面来加载via src。

类似的东西：

  var head = doc.head
  var link = doc.createElement('link')
  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = ...src...
  head.appendChild(link)

在您现有的javascript中。

我用样式块here

组合了一个小例子