使用Javascript向iframe内容添加CSS文本

我正在使用TinyMCE创建HTML编辑器，但HTML文件（在TinyMCE有效之前）在头部有一个样式元素。然后我在那个页面上使用了几个TinyMCE实例，当然那里的那些CSS规则并没有被应用到TinyMCE上。使用Javascript向iframe内容添加CSS文本

我已经设法将CSS转储到一个变量中，并且我已经成功地将一个<style>元素添加到其中的CSS的iframe中，但是它不会影响帧中元素的样式所有。 EG h2{color:red;}没有任何效果，尽管我可以使用Firebug在那里看到它。

这是我使用来获取样式表内容的代码：

if(editor.styleSheets.length > 0){ 
var css = editor.styleSheets[0]; 
if(!is_ie){ 
    css.cssText = ''; 
    for(var i=0; i<css.cssRules.length; i++){ 
    css.cssText += '\n' + css.cssRules[i].cssText; 
    } 
} 
stylesheet = css.cssText; 
}

其中一期工程，样式表包含的CSS规则的字符串。但是，我无法插入它！有任何想法吗？

来源

2010-11-26 HughieW

如果风格确实出现在萤火虫我会说有其他错误。你有一个示例页面吗？ – 2010-11-26 12:03:39

这里有一个更简单的代码片段的CSS规则集添加到TinyMCE的编辑I帧（假设ED是你的编辑器实例和css_rule是牵着你的CSS代码的变量）：

var iframe_id = ed.id + '_ifr'; 
with(document.getElementById(iframe_id).contentWindow){ 
    var h = document.getElementsByTagName("head"); 
    if (!h.length) return; 
     var newStyleSheet = document.createElement ("style"); 
     newStyleSheet.type = "text/css"; 
     h[0].appendChild (newStyleSheet); 
     try{ 
      if (typeof newStyleSheet.styleSheet !== "undefined") { 
      newStyleSheet.styleSheet.cssText = css_rule; 
     } 
     else { 
       newStyleSheet.appendChild(document.createTextNode (css_rule)); 
       newStyleSheet.innerHTML = css_rule; 
     } 
    } 
    catch(e){} 
}

来源

2010-11-26 14:42:49 Thariama

这几乎是我以前的尝试，但它没有工作，虽然我认为追加textnode和之前附加到头，也许这就是为什么。噢，我修改了一下代码，它效果很好，谢谢：D – HughieW 2010-11-26 15:40:27

下面是一些代码，将在所有主要的浏览器添加一个样式规则的文档：

var addCssRule = (function() { 
    var addRule; 

    if (typeof document.styleSheets != "undefined" && document.styleSheets) { 
     addRule = function(selector, rule, doc, el) { 
      var sheets = doc.styleSheets, sheet; 
      if (sheets && sheets.length) { 
       sheet = sheets[sheets.length - 1]; 
       if (sheet.addRule) { 
        sheet.addRule(selector, rule) 
       } else if (typeof sheet.cssText == "string") { 
        sheet.cssText = selector + " {" + rule + "}"; 
       } else if (sheet.insertRule && sheet.cssRules) { 
        sheet.insertRule(selector + " {" + rule + "}", sheet.cssRules.length); 
       } 
      } 
     } 
    } else { 
     addRule = function(selector, rule, doc, el) { 
      el.appendChild(doc.createTextNode(selector + " {" + rule + "}")); 
     }; 
    } 

    return function(selector, rule, doc) { 
     doc = doc || document; 

     var head = doc.getElementsByTagName("head")[0]; 
     if (head && addRule) { 
      var styleEl = doc.createElement("style"); 
      styleEl.type = "text/css"; 
      styleEl.media = "screen"; 
      head.appendChild(styleEl); 
      addRule(selector, rule, doc, styleEl); 
      styleEl = null; 
     } 
    }; 
})(); 

addCssRule("h2", "color:red", document);

在TinyMCE的的编辑文档的情况下，假设你有存储在一个名为editor变量的编辑器实例：

addCssRule("h2", "color:red", editor.getDoc());

来源

2010-11-26 12:59:04

使用Javascript向iframe内容添加CSS文本

回答

相关问题