Javascript 构建可嵌入的HTML页面

我是HTML5新手

我正在尝试将我的基本绘图/白板网页嵌入到任何其他网站

白板由三个文件组成：index.html、app.js和style.css

我要问的是如何使它更像是一个小部件，可以嵌入任何地方

我做了很多搜索，在构建这样的jQuery小部件时感到非常困惑

或者我不必这么做，因为有很多单独的文件

如有任何建议和指导，将不胜感激

---

谢谢

我想答案取决于你的目标受众

@lucasnadalutti认为iFrame可能是嵌入整个HTML页面的最普遍接受的方式，这是正确的，但如果该页面需要以任何方式与宿主站点的其他元素、数据或服务器交互，您可能需要采用另一种方法

由于您正在创建一个要嵌入到其他人网站中的小部件，您的目标受众可能是其他开发人员，因为他们可能会选择在他们构建的网站上使用您的小部件

假设开发人员是小部件的目标受众，您可以创建WordPress插件、jQuery插件或任何数量的其他特定于框架的插件，以方便开发人员使用您的代码

你可以选择创建它的框架，这个决定可能是基于你认为对该类型小部件的需求最高的地方

但是如果你只是说出来，我建议创建一个jQuery插件，带有一个公共GitHub repo，并有一个写得很好的自述文件来解释如何使用这个小部件

这里有一个很好的例子：

编辑
根据您的评论，以下是一些更符合您需求的资源和示例：

下面是一个关于如何构建jQuery插件的好资源：

OWLCarousel是jQuery插件的一个很好的例子，它需要HTML、CSS和JS文件。 有关如何实现插件的示例，请参见此链接：

页面设置+CSS:

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>

<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

 $(document).ready(function() {

   $("#owl-example").owlCarousel();

 });

---

好的，如果有人在他们的网站中放置一个带有src=[你的网页的URL]的iframe，那么你的页面就已经显示在那里了。似乎已经足够满足您的需要了。如果您不需要框架，您可以将html和css作为字符串放入js文件中。@dandavis，您可以提供任何链接或示例来说明如何做到这一点吗？它与jQuery插件或小部件有任何意义吗？css示例：

$（“head”）.append（$（“”）.html（“body{color:red}”）

；要将css转换为字符串文字，您可以转到，将代码粘贴到，然后选择Apply Engine>JSON.stringify。现在我了解到，我将在其中使用小部件的网页可能使用webrtc和web套接字，因此iFrame可能会因同源策略而导致一些安全问题，或者必须更新我不喜欢的跨域文件。我必须通过jQueryUI小部件，您是否有好的参考资料，以及如何将我的三个文件“HTML、JS、CSS”组合在一个文件中，使其更像小部件调用？？