构建可嵌入的HTML页面

Question

我是HTML5的新手

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

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

我要求的是如何让它更像是可嵌入任何地方的小部件？

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

或者我没有，因为有很多单独的文件？

任何建议和指导都将受到高度赞赏 感谢

Answer 1

我认为这里的答案取决于您的目标受众。

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

由于您正在创建一个旨在嵌入其他人网站的小部件，因此您的目标受众可能是其他开发者，因为他们可能会选择使用您的小部件。他们建立的网站。

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

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

但是，如果您只是在说明，我建议使用公开的GitHub repo创建一个jQuery插件，并使用编写良好的README来解释如何使用该小部件。

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

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

这里是如何构建jQuery插件的好资源：
https://learn.jquery.com/plugins/basic-plugin-creation/

Owl Carousel是一个需要HTML，CSS和JS文件的jQuery插件的好例子。 有关如何实现插件的示例，请参阅此链接：
http://owlgraphic.com/owlcarousel/#demo

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

 });