Question

我需要创建一个可以嵌入其他网站（类似于条纹，Opinionlab等）的小部件

我了解创建一个将在目标页面中引用的js和一个或多个将启动交互的UI组件所需的基本概念。

我的具体问题是，如何确保弹出对话框的外观和感觉与我的品牌相匹配（理想情况下是通过CSS），而不影响来源网站。有实现这个目的的反应教程。

Sample HTML site:
<html>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  <script src="https://example.com/widgets/widget.js"></script>

  <head></head>
  <body>
    <button id="btnShowWidget">show widget</button>
    <div id="divWidget"></div>
  </body>
</html>

widget.js
$(document).ready(function() {
    console.log("in widget.js, document ready!");
    $("#btnShowWidget").click(showWidget);
});

function showWidget() {
     $.ajax({
        url: "https://api.example.com/data"
     }).then(function(data) {
         console.log(data);
         //Render the div 
     });
}

如何创建HTML5小部件

0 个答案: