构建可嵌入的HTML页面

Question

我是HTML5新手

我正在尝试使我的基本油漆/白板网页嵌入到任何其他网站。

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

我要问的是如何使它更像widget嵌入任何地方?

我做了很多搜索，真的很困惑，在构建这样的jQuery小部件之间http://alexmarandon.com/articles/web_widget_jquery/loading-javascript-libraries

或者我不需要，因为有许多单独的文件?

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

Answer 1

我认为这个问题的答案取决于你的目标受众。

@lucasnadalutti是正确的，iFrame可能是最普遍接受的嵌入整个HTML页面的方式，但如果该页面需要与主机站点的其他元素，数据或服务器以任何方式进行交互，您可能会想要追求另一种方法。

因为你正在创建一个小部件，是为了嵌入到其他人的网站，你的目标受众可能是其他开发人员，因为他们可能会选择在他们建立的网站上使用你的小部件。

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

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

但如果你只是陈述，我建议创建一个jQuery插件与公共GitHub的repo和一个写得很好的自述来解释如何使用这个小部件。

下面是一个很好的例子:https://github.com/carhartl/jquery-cookie

编辑
根据你的评论，这里有一些资源和例子更具体地满足你的需求:

这里有一个关于如何构建jQuery插件的很好的资源:
https://learn.jquery.com/plugins/basic-plugin-creation/

Owl Carousel是一个jQuery插件的好例子，它需要HTML、CSS和JS文件。这个链接是如何实现这个插件的示例:
演示http://owlgraphic.com/owlcarousel/

页面设置+ 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>

HTML:

<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>

JS:

 $(document).ready(function() {
   $("#owl-example").owlCarousel();
 });