Question

我需要开发一个Web应用程序，我们的数据/ html需要使用iframe或javascript显示在第三方网站上。示例：板球小部件共享。

有人可以告诉我它叫什么类型的开发吗？

会有多种小部件，其中一些小部件也需要定期缩短（每x秒）。

另外，我应该使用iframe还是使用javascript实现方法在客户端服务器上生成输出。

有人能为我提供参考或想法吗？

Answer 1

考虑到我已正确理解您的问题，这意味着您目前需要为网站开发小部件（而非网络应用）。小部件是其他人可以在其网站上使用的东西。

使用您给出的示例添加上述理解 -

假设你开发了一个Cricket小部件，100个其他网站可以使用一小段API或代码将这个小部件放在他们的网站上。并且，此小部件每刷新一次“x”秒以显示实时分数。希望这就是你所需要的。

以下是解决此问题的解决方案/方法：

您需要做的是编写一个嵌入器或加载器脚本，并牢记以下几点 -

将其设为异步，以便客户网站不会放慢速度
保持简短。 摘要您的代码。不要给用户100行。
最好不要使用框架。有可能与您客户的网站/框架发生冲突。 甚至不使用jQuery！（因为它可能与用户的jquery版本冲突并导致小部件和网站出现很多问题）编写纯Javascript代码：）
不要使用GLOBAL变量。使用var或let并遵循最佳做法。使用全局变量可能会与用户的变量发生冲突，整个网站/客户端可能会混乱。

示例代码 -

<script data-version='v1' data-widget-id='your-clients-id' id='unique-embedder-id' type='text/javascript'>
  // "data-version": It's useful to put the version of your embedder script in the "version" data attribute.
  // This will enable you to more easily debug if any issues arise.
  // "data-widget-id": This ID allows us to pull up the correct widget settings from our database.
  // It's a "client id" of sorts.
  // "id": This HTML id allows us to refer to this embedder script's location. This is helpful if you want to inject html
  // code in specific places in hour hosts's website. We use it to insert our payload script into the <head> tag.

  //We wrap our code in an anonymous function to prevent any ofour variables from leaking out into the host's site.
  (function() {
    function async_load(){
      //BELOW: we begin to construct the payload script that we will shortly inject into our client's DOM.
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      // Below is the URL you want them to get your payload script from!
      var theUrl = 'http://www.your-website.com/assets/your-payload-script.js';
      // At the end we tack on the referrer's URL so we know which website is asking for our payload script.
      s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + 'ref=' + encodeURIComponent(window.location.href);
      // This finds the location of our embedder script by finding the element by it's Id.
      // See why it was useful to give it a unique id?
      var embedder = document.getElementById('unique-embedder-id');
      // This inserts our payload script into the DOM of the client's website, just before our embedder script.
      embedder.parentNode.insertBefore(s, embedder);
    }

    // We want the our embedder to do its thing (run async_load and inject our payload script)
    // only after our client's website is fully loaded (see above).
    // Hence, we wait for onload event trigger. This no longer blocks the client's website from loading!
    // We attachEvent (or addEventListener to be cross-browser friendly) because we don't want to replace our
    // client's current onLoad function with ours (they might be doing a bunch of things on onLoad as well!)
    if (window.attachEvent)
      window.attachEvent('onload', async_load);
    else
      window.addEventListener('load', async_load, false);
    })();
</script>

阅读评论。他们非常有帮助：）

您的用户必须使用精美抽象的脚本标记 -

<script type="text/javascript" src="http://example.com/widget.js"></script>

或者甚至可能是iFrame（旧的是黄金日）在iFrame中呈现HTML （如果您不想'公开'公开（大多数人不知道）您的抽象Javascript，那么这是最佳方式以及）

<iframe src="http://example.com/mywidget.html"></iframe>

以下是我提到的参考资料，还有可以重复使用的示例窗口小部件 -

Developing an Embeddable Javascript Widget / Snippet for Client Sites
Creating an Embeddable JavaScript Widget
Creating Asynchronous, Embeddable JavaScript Widgets
Building an embeddable Javascript widget (third-party javascript)

最后一次，请不要使用全局变量和编写异步代码。这两个是您必须注意制作出具有顶级性能的优秀/成功小部件的主要内容。

快乐的编码！希望它有所帮助：）

数据共享机制

1 个答案: