使用 jQuery 将样式表附加到 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/624979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Append a stylesheet to an iframe with jQuery
提问by hunter
I'm creating an HTML editor, similar to this one I'm typing in right now with the output below. I'm using an iframe and dumping the $htmlTextBox.val() into the body of the iframe.
我正在创建一个 HTML 编辑器，类似于我现在正在输入的这个编辑器，输出如下。我正在使用 iframe 并将 $htmlTextBox.val() 转储到 iframe 的主体中。
I'm trying to create a stylesheet inside the iframe so that it looks as good as it works.
我正在尝试在 iframe 中创建一个样式表，以便它看起来和工作一样好。
Thanks in advance!
提前致谢！
$htmlTextBox.keyup(function(){
SetPreview();
});
function SetPreview()
{
var doc = $preview[0].contentWindow.document;
var $body = $("body", doc);
$body.html($htmlTextBox.val());
}
回答by bobince
Whilst you caninteract with an iframe's document.styleSheets, the old-school reliable way is either to have the stylesheet there in the first place (by writing an iframe-src to point to an empty document with the desired stylesheet), or put it in place with document.write(). For example:
虽然您可以与 iframe 的 document.styleSheets进行交互，但老式可靠的方法是首先将样式表放在那里（通过编写 iframe-src 指向具有所需样式表的空文档），或者将其放入与document.write(). 例如：
<body>
<iframe></iframe>
<script type="text/javascript">
var d= frames[0].document;
d.open();
d.write(
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd">'+
'<html><head><style type="text/css">'+
'body { font-size: 200%; }'+
'<\/style><\/head><body><\/body><\/html>'
);
d.close();
d.body.innerHTML= '<em>Hello</em>';
</script>
</body>
(This will also set the iframe document to Standards Mode, assuming that's what you want.)
（这也会将 iframe 文档设置为标准模式，假设这是您想要的。）
回答by hunter
Followup:
跟进：
HTML
HTML
<iframe id="message" name="message" />
jQuery
jQuery
setTimeout(function() {
var $head = $("#message").contents().find("head");
$head.append($("<link/>",
{ rel: "stylesheet", href: url, type: "text/css" }
));
}, 1);
回答by Palanikumar
We can insert style tag into iframe.
我们可以在 iframe 中插入 style 标签。
<style type="text/css" id="cssID">
.className
{
background-color: red;
}
</style>
<iframe id="iFrameID"></iframe>
<script type="text/javascript">
$(function () {
$("#iFrameID").contents().find("head")[0].appendChild(cssID);
//Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
});
</script>
回答by Will Lanni
Assuming you're on the same domain and not dealing with cross domain security, you'll want to check if the iFrame is loaded--NOT JUST THE IFRAME, BUT THE DOCUMENT INSIDE!! (This hung me up for a while whilst trying to use .load())
假设您在同一个域中并且不处理跨域安全性，您将需要检查 iFrame 是否已加载——不仅仅是 IFRAME，而是里面的文档！！（这让我在尝试使用时挂了一段时间.load()）
Then, using jquery, access the contents, access the head, and append your style sheet to the head.
然后，使用 jquery，访问内容，访问头部，并将样式表附加到头部。
$(document.getElementById('yourIframeID').contentWindow.document).ready(function() {
$('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />');
});
回答by Jason
Pulled this code below from jHtmlArea source. Funny thing is, the feature was there and I didn't realize it. I came across this SO Question when I was trying to figure out how to implement it. :)
从 jHtmlArea 源中提取以下代码。有趣的是，这个功能就在那里，我没有意识到。当我试图弄清楚如何实现它时，我遇到了这个 SO Question。:)
This isn't really "jQuery" but it works. I'm guesing something with append isn't working with iframe so they did it old school. Bobince's answer looks good too, and might be more reliable? So far, this seems to work ok.
这不是真正的“jQuery”，但它有效。我猜 append 的东西不能与 iframe 一起使用，所以他们是老派的。Bobince 的回答看起来也不错，而且可能更可靠？到目前为止，这似乎工作正常。
var e = edit.createElement('link');
e.rel = 'stylesheet';
e.type = 'text/css';
e.href = options.css;
this.iframe[0].contentWindow.document.getElementsByTagName('head')[0].appendChild(e);
EDIT: I think the reason this works is if it is sameDomain (including creating iframe in js) Otherwise the usual browser security blocks will prevent you from manipulating iframe dom.
编辑：我认为这有效的原因是它是否是 sameDomain（包括在 js 中创建 iframe）否则通常的浏览器安全块将阻止您操作 iframe dom。
