在 Shinydashboard 中显示 Openweather 小部件

Question

我正在为一位同事构建一个仪表板，她要求我在仪表板中显示一个城市的实时天气。我上网查看，看到一些非常简单的黑暗天空天气代码here。它被嵌入到 iframe 中。我正是想这样做，但黑暗的天空不再发放任何 API 密钥。所以我在网上找到了另一个名为开放天气的天气源，我得到了一个 API 密钥，并尝试了以下代码。

    tabItem(tabName = 'weather',
      fluidRow(
        tags$iframe(
          seamless = "seamless",
          src = "http://api.openweathermap.org/data/2.5/forecast?id=2761333&APPID= my key",
          height = 800,
          width = 1400
        )
      )
    )

我没有收到任何错误消息或任何内容，但在仪表板中，您只看到类似这样的内容

{"cod":"200","message":0,"cnt":40,"list":[{"dt":1596456000,"main":{"temp":293.37,"feels_like":293.3,"temp_min":293.37,"temp_max":293.86,"pressure":1009,"sea_level":1009,"grnd_level":987,"humidity":79,"temp_kf":-0.49},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":{"all":59},"wind":{"speed":3.19,"deg":206},"visibility":10000,"pop":0.87,"rain":{"3h":1.77},"sys":{"pod":"d"},"dt_txt":"2020-08-03 12:00:00"},{"dt":1596466800,"main":

只是基本数据。我认为无论如何这都是一个不太可能的事情，但我在网站上看到他们有一个小部件构造函数，并且他们给了我看起来像 HTML 代码的内容。如下：

<div id="openweathermap-widget-21"></div>
<script src='//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/d3.min.js'></script><script>window.myWidgetParam ? window.myWidgetParam : window.myWidgetParam = [];  window.myWidgetParam.push({id: 21,cityid: '2761367',appid: 'my key',units: 'metric',containerid: 'openweathermap-widget-21',  });  (function() {var script = document.createElement('script');script.async = true;script.charset = "utf-8";script.src = "//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(script, s);  })();</script>

这应该以某种方式制作一个与网站here类似的小部件，但我不是开发人员，我只是使用 R 工作，闪亮的仪表板对我来说是新的，所以我不确定如何放置这个每天显示的小部件天气闪亮。如果有人可以告诉我如何做到这一点或其他方式，我将不胜感激。

Answer 1

您不能使用

iframe

。

我尝试使用

iframe

和

srcdoc

作为小部件周围的沙箱，但不幸的是 openweathermap javascript 不喜欢这样。我给他们发了一封电子邮件，看看他们是否可以解决这个问题，但我们必须拭目以待。

与此同时，您所能做的就是直接在 HTML 中使用该小部件。如果我听到任何新消息，我会在这里更新。