如何让小部件每隔几秒更新一次答案

【问题标题】：how to make widget update every few seconds如何让小部件每隔几秒更新一次
【发布时间】：2017-09-13 11:18:59
【问题描述】：

我从https://coinmarketcap.com/widget/?c=bitcoin 获得了小部件，但我不太确定如何让它每隔几秒或几分钟更新一次，因为目前它不会更新，除非我刷新页面。如果有人可以提供帮助，那就太好了。

代码如下：

&lt;script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"&gt;&lt;/script&gt;&lt;div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-stats="USD" data-statsticker="false"&gt;&lt;/div&gt;

<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script>
<div id="mainContainer" class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="ZAR" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-stats="ZAR" data-statsticker="true"></div>

提前致谢！

【问题讨论】：

好吧，在您的情况下，您可以每隔几秒钟使用元刷新或 javascript 刷新您的页面。但这会使整个页面闪烁。除非您将该代码放入 iframe
是的，我可以，但我希望只刷新 div（我知道这方面的 javascript），但是当我这样做时，内容不会改变。

标签： javascript html

【解决方案1】：

由于您的脚本不会呈现 iframe 并且只会在加载后呈现，因此您需要每隔几秒重新附加脚本：

const redrawElements = {
  div: {
    id: 'mainContainer',
    'class': 'coinmarketcap-currency-widget',
    'data-currency': 'bitcoin',
    'data-base': 'ZAR',
    'data-secondary': '',
    'data-ticker': 'true',
    'data-rank': 'true',
    'data-marketcap': 'true',
    'data-volume': 'true',
    'data-stats': 'ZAR',
    'data-statsticker': 'true',
  },
  script: {
    src: 'https://files.coinmarketcap.com/static/widget/currency.js',
  },
}
const redrawContainer = document.querySelector( '.draw-container' );

function redraw() {
  redrawContainer.innerHTML = '';
  
  // Recreate elements
  Object.keys( redrawElements ).forEach( el => {
    const domEl = document.createElement( el );
    // Iterate over attributes
    Object.keys( redrawElements[ el ] ).forEach( attr => {
      domEl.setAttribute( attr, redrawElements[ el ][ attr ] );
    } );
    redrawContainer.appendChild( domEl );
  } );
}
redraw();
// Redraw every 10 seconds
setInterval( redraw, 10000 );

.draw-container {
  min-height: 180px;
}

<p>This is your content, which should stay the same</p>
<div class="draw-container"></div>
<p>And because <code>.draw-container</code> has a min-height, your content should not jump around.</p>

【讨论】：

这行得通！非常感谢！对此，我真的非常感激。你为我节省了很多时间！
不客气。但请记住，这有点 hacky :) 如果您有时间和精力，最好构建自己的小部件。
是的。这只是为了现在的目的。谢谢！

【解决方案2】：

使用 SetInterval 函数添加 iframe 的来源。这样只有 div 会被刷新。

setInterval(()=>{$('iframe').prop('src','widget-url')},1000)

【讨论】：

而iframe在哪里？
忘记 iframe 每秒清除 html 或 div 并再次将 html 添加到 div。像 var widgetHtml = "
"
setInterval(()=>{$('#widget').html(""); $('#widget').html("widgetHtml ") },1000)

为什么不起作用，我们正在清除html并再次附加，因此可以再次调用并获取最新数据。

那么请更新您的答案以显示一个工作示例:)