在同一个 html 页面上多次使用同一个小部件

Question

我是 html 和小部件的新手，在同一页面上多次使用 https://coinmarketcap.com/widget/price-blocks/ 中的同一个小部件时遇到问题：

HTML - 所需的小部件

<div class="container">
  <h1>Coin Set 1</h1>
<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinPriceBlock.js"></script>
<div id="coinmarketcap-widget-coin-price-block" coins="1,1027,825" currency="USD" theme="light" transparent="false" show-symbol-logo="true"></div>
</div>

<div class="container">
  <h1>Coin Set 2</h1>
<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinPriceBlock.js"></script>
<div id="coinmarketcap-widget-coin-price-block" coins="1,1027,825" currency="USD" theme="light" transparent="false" show-symbol-logo="true"></div>
</div>

我可以让小部件在不同的 html 页面上工作。

有人可以解释为什么这不能在同一页面上工作吗？是否可以多次使用？

Answer 1

javascript 不适用于处理两个小部件。多次导入不会改变这一点。

一种解决方案是使用 iframe 来分隔小部件。

<iframe frameborder="0" width="800" height="400" src="widget.html"></iframe>
<iframe frameborder="0" width="800" height="400" src="widget.html"></iframe>

将小部件代码放在widget.html。

在同一个 html 页面上多次使用同一个小部件

Using the same widget multiple times on the same html page

html

javascript

widget