使用jQuery将样式表附加到iframe

我正在创建一个HTML编辑器，类似于我现在正在键入的输出，下面的输出。 我正在使用iframe并将$ htmlTextBox.val（）转储到iframe的主体中。

我正在尝试在iframe中创建一个样式表，以使它看起来像它的工作一样好。

提前致谢！

$htmlTextBox.keyup(function(){ SetPreview(); }); function SetPreview() { var doc = $preview[0].contentWindow.document; var $body = $("body", doc); $body.html($htmlTextBox.val()); } 

Answer 1

虽然你可以与iframe的document.styleSheets 进行交互，但老派可靠的方法是首先在那里设置样式表（通过编写iframe-src指向带有所需样式表的空文档），或者将其放入与document.write() 。 例如：

（这也会将iframe文档设置为标准模式，假设这是您想要的。）

Answer 2

跟进：

HTML

jQuery的

 setTimeout(function() { var $head = $("#message").contents().find("head"); $head.append($("", { rel: "stylesheet", href: url, type: "text/css" } )); }, 1); 

Answer 3

我们可以在iframe中插入样式标签。

Answer 4

从jHtmlArea源获取以下代码。 有趣的是，这个function在那里，我没有意识到。 当我试图弄清楚如何实现它时，我遇到了这个SO问题。 🙂

这不是真正的“jQuery”，但它的确有效。 我猜是附加的东西不能与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); 

编辑 ：我认为这是有效的原因是它是相同的域（包括在js中创建iframe）否则通常的浏览器安全块将阻止你操纵iframe dom。

请参见如何将CSS应用于iFrame

Answer 5

假设您在同一个域上并且没有处理跨域安全性，那么您将需要检查iFrame是否已加载 – 不仅仅是IFRAME，而是文档内容！ （这在试图使用.load()时挂了我一会儿

然后，使用jquery访问内容，访问头部，并将样式表附加到头部。

  $(document.getElementById('yourIframeID').contentWindow.document).ready(function() { $('yourIframeID').contents().find('head').append(''); });