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

Question

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

我需要创建一个客户端小部件（想想贷款计算器），它可以作为公共页面托管，需要执行以下操作

1. 小部件需要在任何页面内添加，并且应该继承主页的样式表
2. 所有计算都应在客户端进行
3. 如果要传递值，则预先填充少数字段

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

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

即

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

问题2：设置此小部件样式的最佳方法是什么？

1. 我可以创建默认样式表并提供实施者团队 如果他们想要自定义小部件，请使用指南。
2. 我可以在URL中提供属性，因此实现者可以传递样式值，即 背景颜色，字体颜色等。

由于

Answer 1

一个非常广泛的问题，但我会试一试。首先，转到here以了解从哪里开始JavaScript / jQuery方面的事情。

1. 至于如何加载小部件，这取决于你的想法 最佳用户体验。我个人更喜欢div标签。
2. 使用自己的CSS文件设置窗口小部件的样式。如果愿意，可以根据实例化期间传递的参数更改样式。

Answer 2

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

我认为一个更有问题的问题是，您必须为iframe代码段定义维度。如果你有一个内联渲染计算器的脚本，你可以设置它以适应它可用的尺寸，无论它是一个大的内容区域，一个小的侧边栏，一个移动设备，等等。当然，要改变，但如果将其分发给技术上不受欢迎的用户，那么如果它只是“工作”可能会更容易。尽可能容易，而不需要他们的干预。

相反，如果您要分发要在各种网站和CMS平台上发布的脚本，iframe可能会更容易，因为某些CMS平台默认会删除<script>个标记。

但您的要求相当宽松。我刚才概述的一切都是可以纠正的。从技术上讲，无论哪种方式都可能完美无缺。