如何使用jQuery创建通用客户端小部件？

*我是clienside开发的新手，不确定这个问题是否适合stackoverflow，请告诉我是否应该将其转移到其他地方

我需要创建一个客户端小部件（think loan calculator），它可以作为公共页面托管，并且需要执行以下操作

小部件需要添加到任何页面中，并且应该继承母版页的样式表

所有的计算都应该在客户端进行

如果向其传递值，则预填充几个字段

在架构上，我正在考虑使用html和css创建jquery小部件。在公共站点的某个位置托管一个页面

问题1：在页面中加载小部件的最佳方式是什么？通过iFrame加载公共url或使用jquery在页面加载时动态呈现DIV

i、 e

问题2：设计这个小部件的最佳方式是什么

我可以创建一个默认的样式表，并提供给实现者团队 如果他们想要自定义小部件，请使用指南

我可以在URL中提供属性，以便实现者可以传入样式值，即。 背景色、字体颜色等

---

谢谢

这是一个非常宽泛的问题，但我要试一试。首先，想一想从JavaScript/jQuery的哪一方开始

至于如何加载小部件，这取决于你考虑的是什么。 最佳用户体验。我个人更喜欢div标签

使用自己的CSS文件设置小部件的样式。如果愿意，可以根据实例化期间传递的参数更改样式

---

默认情况下，iframe不会继承父页面的样式。您可以通过使用Javascript将父级的样式表加载到DOM中来解决这个问题，但是您需要两次请求这些文件

我认为一个更麻烦的问题是，您必须为iframe代码段定义维度。如果您有一个内联呈现计算器的脚本，您可以将其设置为适合提供给它的维度，无论它是大内容区域、小边栏、移动设备等。当然，Iframe维度可以更改，但如果将其分发给技术上不感兴趣的用户，如果它只是“工作”，可能会更容易在不需要他们干预的情况下，尽可能容易地完成

相反，如果您要在各种站点和CMS平台上分发脚本，则iframe可能更容易，因为某些CMS平台默认情况下会去掉

标记

---

不过你的要求相当宽松。我刚才概述的一切都是可以纠正的。从技术上讲，任何一种方法都可能非常有效。

是的，我知道这是一个广泛的问题，所以我尽量把它保持在重点上。谢谢你指向widget工厂。谢谢Ben，理解你的意思。不幸的是，我的要求很宽松，所以您的所有回答和评论都使我更容易完成这项工作。

<script id="jsCal" />
<div id"containerCal" class="default" />