Refresh Webpage Card (or iframe) in dashboard periodically

Configuration Frontend
1

I have a webpage card on a wall display i’d like to refresh periodically every 5 minutes or so:

image
image1824×1362 159 KB

I can put it in an iframe but cant find any way to refresh it:

url: >-
  https://forecast.weather.gov/MapClick.php?lat=43.67513520000006&lon=-116.91343799999999
aspect_ratio: 100%
card_mod:
  style: |
    div#root iframe  {
    transform: scale(100%);
    transform-origin: 0 0;
    width: 800px;
    height: 500px;
    justify-self: center;
    margin-left: 0px !important;
          }

This is so basic. I can’t believe there isnt a way. I found a js clue, but not sure how to implement it:

<iframe 
   src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRhl6HlSXkbrMcFZBSH58Jx5_VwFqzfFr0aqWcKXs4nWVfPDjwwh4vv6pLRur0nR0SKjRShN8/pubhtml?gid=1977651099&amp;single=true&amp;widget=true&amp;headers=false"
   height=800 
   width=800>
</iframe>

setInterval(()=>{
    var iframe = document.getElementById('iframe'); 
    iframe.reload(true); 
}, 1000) // reload once a second

I’ve also tried loading it like this:

type: iframe
url: "/local/custom_ui/nws.html"
aspect_ratio: 100%
card_mod:
  style: |
    div#root iframe  {
    transform: scale(100%);
    transform-origin: 0 0;
    width: 800px;
    height: 500px;
    justify-self: center;
    margin-left: 0px !important;
          }

with nws.html containing this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="10">
    <title>NWS</title>
  </head>
  <body>
   <iframe src="https://forecast.weather.gov/MapClick.php?lat=43.67513520000006&lon=-116.91343799999999#.YjSKOi9MEgp"  frameborder="0"></iframe>
  </body>
</html>

It refreshes, but doesn’t display properly:

image
image552×357 27.5 KB

I’m out of ideas!

2

Nobody? There must be some way to do this - it’s a totally basic function!