创建一个网页插件。如何包含CSS和渲染元素？

我想创建一个网页插件（而不是一个jQuery插件），可以由网站管理员通过将几行代码粘贴到他们的HTML中来安装。创建一个网页插件。如何包含CSS和渲染元素？

例如：

<script src=".../plugin.js" /> 
<script>window.plugin(parent_element, {some: "config"});</script>

Disqus做到这一点：

<div id="disqus_thread"></div> 
<script type="text/javascript"> 
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ 
    var disqus_shortname = 'asdasdsadad'; // required: replace example with your forum shortname 

    /* * * DON'T EDIT BELOW THIS LINE * * */ 
    (function() { 
     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
     dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
    })(); 
</script> 
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

（我不知道为什么Disqus需要运行JavaScript添加JavaScript到头部。）

的插件将创建一个新的html元素，并要求该元素的CSS。我正在使用http://youmightnotneedjquery.com/来避免依赖jQuery。

我只针对IE9 +，FF和Chrome。

从<script>标签加载css的常见做法是什么？

（我真的希望网站管理员能够覆盖插件的CSS，样式它。）

什么是生成HTML的最佳方式？元素，原始字符串，函数或某种形式的模板库？

来源

2014-10-30 fadedbee

我认为你可以使用这个：http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript – 2014-10-30 13:26:31

插件创建者想要将js添加到身体内的head的最可能原因是为了确保任何人（即使那些不必访问head的人）都可以使用该插件。

如果你想覆盖现有的CSS指令，你所要做的就是确保你的最后一个。考虑到你的压倒性优势，有时你可能不得不使用!important，但这确实取决于特定元素的所谓特异性。你可以阅读更多关于此这里：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

编辑：在原来的问题的评论所指出的@Yousef_Shamshoum，这里是一个SO问题上使用JavaScript添加CSS文件回答了如何（即“从<script>标签加载css”）：How to load up CSS files using Javascript?

来源

2014-10-30 13:38:44 webeno

创建一个网页插件。如何包含CSS和渲染元素？

回答

相关问题