没有 iframe 的嵌入式小部件中的自定义样式答案

【问题标题】：Custom styles in embedded widget without iframe没有 iframe 的嵌入式小部件中的自定义样式
【发布时间】：2015-05-03 16:28:13
【问题描述】：

我正在创建一个小部件，该小部件只需包含一小段 html 和 javascript 即可嵌入到用户的页面中。

Idea 类似于 Facebook 和 Twitter 的“赞”和“推文”按钮。唯一的区别是 我不能像他们那样使用 iframe 实现小部件。我需要将小部件注入到常规 DOM 元素中，该元素将标有特殊的 data 和 class 属性。

例如，解决方案可能如下所示。这将提供给用户以插入到他的 html 中：

<div class="widget-action" data-url="http://example.com"></div>
<script>
(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s);
   js.id = id;
   js.src = "http://cdn/where/widgets/script/is/hosted";
   fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'namespace-widget-sdk');
</script>

托管在 CDN 上的 Widget 脚本将完成这项工作 - 创建必要的元素并将它们注入 widget-action 元素。

这很简单。我想弄清楚 - 处理样式的最佳方法是什么？

什么是最有效的方法？

要以与<script> 相同的方式动态创建<link> 元素并提供href 属性以及托管.css 文件的CDN 链接？
或者使用动态创建的<style> 标签注入样式？
其他选项？

谢谢！

【问题讨论】：

标签： javascript html css iframe widget

【解决方案1】：

如果您知道小部件的输出，您可以使用普通的 css 文件对其进行样式设置。

您可以只定位元素，并根据需要设置它们的样式。如果小部件没有真正在输出中添加类和 id，则将小部件放在 div 中，然后设置样式。

如果需要进一步的帮助，可以提供一个输出示例。

【讨论】：