使用页面 .css 文件将 CSS 添加到 iframe 元素 [重复]
Posted
技术标签:
【中文标题】使用页面 .css 文件将 CSS 添加到 iframe 元素 [重复]【英文标题】：Add CSS to iframe elements using the page .css file [duplicate] 【发布时间】：2018-01-12 07:20:32 【问题描述】：首先，似乎有很多帖子具有相同的标题，但没有一个专注于我面临的问题。这就是我打开这个新问题的原因，我希望标题足够明确。
我正在自己开发一个文本编辑器，一开始我使用的是<textarea>，但我想为我正在编写的元素添加各种样式。在阅读了很多关于它的主题后，我决定将我的<textarea> 更改为<iframe>。
在尝试任何新的设计或其他东西之前，我希望这个<iframe> 和我以前的<textarea> 具有相同的行为。但我面临一个问题：
我的<iframe> 元素位于页面index.html 中，该页面与CSS 文件style.css 链接。我可以在 style.css 中更改框架的全局 <iframe> 设计（如宽度、高度、边框...），但我无法为元素添加特殊设计 inside <iframe> 以及我在 style.css 中添加的属性。
我在检查器中看到 iframe 在任何标记之前都有一个#document
但是即使我尝试将这个奇怪的标签添加到 CSS 中，样式也不会应用于我想要更改的元素。
简而言之，我的问题是这样的：是否可以在主机页面的样式表文件中的 iframe 内的元素中添加一些样式？
以下是我的代码的一些相关部分，显示了我想做的事情：在<iframe> 内的<p> 标记中添加自定义字体。
window.onload = function()
var frameElement = document.getElementById("text-field");
var doc = frameElement.contentDocument;
doc.body.contentEditable = true;
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;
<!DOCTYPE html>
<html>
<head>
<title>A Text Editor Project</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="text-editor">
<iframe class="text-field" id="text-field" src="about:blank" contenteditable="true">
</iframe>
</div>
</body>
</html>【问题讨论】：
你可以尝试用 iframe 代替 @Foaster 如果您尝试阅读第一个答案 cmets，您会发现此解决方案已完全过时且在 HTML5 中无效。 @Sanil 我想使用 iframe 出于各种原因，包括安全原因，因为我阅读了很多关于这个主题的建议。 @Louis'LYRO'Dupont 嗯......没有理由被冒犯......原始答案有效并且是有效的HTML5 - 就像下面接受的答案一样。如果您尝试过，您就会意识到这一点。 【参考方案1】：来自父级的样式不会应用于 iframe 中的文档。最好的解决方案是将样式表添加到 iframe 中的文档中。通过 javascript 或创建模板页面以通过 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
【讨论】：
以上是关于使用页面 .css 文件将 CSS 添加到 iframe 元素 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何将自己的 javascript/css 文件添加到 wordpress 插件菜单页面？