# Insert \<iframe\> from BuienRadar not working

**URL:** <https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744>\
**Category:** Dashboard\
**Created:** [21 September 2019 09:26 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744 "2019-09-21T09:26:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![menno](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@menno](https://discourse.nodered.org/u/menno)\
**Post date:** [21 September 2019 09:26 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/1 "2019-09-21T09:26:42Z")

</div>

Hi NR users  
question  
on the buienradar website you can create a iframe  
see here:  
[https://www.buienradar.nl/overbuienradar/gratis-weerdata](https://www.buienradar.nl/overbuienradar/gratis-weerdata)

the iframe is here :  
\< iframe src="[https://gadgets.buienradar.nl/gadget/zoommap/?lat=52.37403&lng=4.88969&overname=2&zoom=6&naam=amsterdam&size=2&voor=1](https://gadgets.buienradar.nl/gadget/zoommap/?lat=52.37403&lng=4.88969&overname=2&zoom=6&naam=amsterdam&size=2&voor=1)" scrolling=no width=256 height=256 frameborder=no\>

i tried everything but i cannot solve the issue to display this on my dashboard

does anybody has an example to display this iframe on my dashboard

many thanks in advance

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [21 September 2019 09:40 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/2 "2019-09-21T09:40:05Z")

</div>

Works fine

 ![21](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b9e451d05058ea2bba028db86ce5ca3b082a7eab.jpeg)

template node:

```auto
[{"id":"a0e19392.6a90b8","type":"ui_template","z":"ac3a9890.7ebed","group":"42d071c1.e1346","name":"","order":0,"width":0,"height":0,"format":"<IFRAME SRC=\"https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256\" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=256 HEIGHT=256></IFRAME>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":720,"y":552,"wires":[[]]},{"id":"42d071c1.e1346","type":"ui_group","z":"","name":"buienradar","tab":"76ec6942.7f7ab","disp":true,"width":"6","collapse":false},{"id":"76ec6942.7f7ab","type":"ui_tab","z":"","name":"FINANCES","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![menno](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@menno](https://discourse.nodered.org/u/menno)\
**Post date:** [21 September 2019 10:43 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/3 "2019-09-21T10:43:04Z")

</div>

> [@bakman2](#):
>
> [{"id":"a0e19392.6a90b8","type":"ui\_template","z":"ac3a9890.7ebed","group":"42d071c1.e1346","name":"","order":0,"width":0,"height":0,"format":"\<IFRAME SRC="[https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256\](https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256%5C)" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=256 HEIGHT=256\>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":720,"y":552,"wires":[]},{"id":"42d071c1.e1346","type":"ui\_group","z":"","name":"buienradar","tab":"76ec6942.7f7ab","disp":true,"width":"6","collapse":false},{"id":"76ec6942.7f7ab","type":"ui\_tab","z":"","name":"FINANCES","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Yes this works great ...  
do you also have a iframe "refresh" in place ?  
so every X minutes/hours its going to refresh the iframe ?  
thx

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [21 September 2019 11:22 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/4 "2019-09-21T11:22:57Z")

</div>

even in het Nederlands, als je de url wijzigd naar degene die je zelf in de eerste post hebt gegeven, dan word het plaatje direct geupdate, hoeft niet te refreshen, ze serveren elke 5 (of 10 ligt er aan wat je opvraagd) een nieuwe.

---

<div class="post-metadata">

**Author:** ![menno](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@menno](https://discourse.nodered.org/u/menno)\
**Post date:** [21 September 2019 11:51 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/5 "2019-09-21T11:51:44Z")

</div>

Thx man !  
i will have a look

---

<div class="post-metadata">

**Author:** ![Nice\_to\_have](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@Nice\_to\_have](https://discourse.nodered.org/u/Nice_to_have)\
**Post date:** [24 September 2019 07:04 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/6 "2019-09-24T07:04:04Z")

</div>

I am struggling to refresh the iframe from buienradar.  
I am using it on my dashboard, but ones the the page is loaded, i can not refresh the iframe it self, i need to refresh the whole page to get it updated.  
Is there a way in where I can only refresh the iframe?

```auto
[{"id":"7a2ea790.e11b08","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"68d3a342.bb429c","type":"inject","z":"7a2ea790.e11b08","name":"","topic":"","payload":"","payloadType":"date","repeat":"300","crontab":"","once":true,"onceDelay":0.1,"x":130,"y":100,"wires":[["9ab79615.d703d8"]]},{"id":"f8dca0d4.d7f61","type":"debug","z":"7a2ea790.e11b08","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":600,"y":100,"wires":[]},{"id":"9ab79615.d703d8","type":"ui_template","z":"7a2ea790.e11b08","group":"aea3e167.c2226","name":"Buienradar","order":1,"width":"5","height":"5","format":"<IFRAME SRC=\"https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256\" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=256 HEIGHT=256></IFRAME>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":350,"y":100,"wires":[["f8dca0d4.d7f61"]]},{"id":"aea3e167.c2226","type":"ui_group","z":"","name":" Huidig","tab":"117fe5ac.4c689a","order":1,"disp":false,"width":"14","collapse":false},{"id":"117fe5ac.4c689a","type":"ui_tab","z":"","name":"Weer","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [24 September 2019 08:01 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/7 "2019-09-24T08:01:22Z")

</div>

I thought the image would rotate but it doesn't. Also for @menno.

To refresh it, html can be passed the template node via `msg.template`.

```auto
[{"id":"9d693c2.436114","type":"inject","z":"de63431d.592d8","name":"","topic":"","payload":"","payloadType":"date","repeat":"300","crontab":"","once":true,"onceDelay":0.1,"x":142,"y":96,"wires":[["f3dee54c.4e5d68"]]},{"id":"96202238.dc2c38","type":"debug","z":"de63431d.592d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":578,"y":96,"wires":[]},{"id":"39c946a7.272f82","type":"ui_template","z":"de63431d.592d8","group":"87e898a3.1c91f","name":"Buienradar","order":1,"width":"5","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":430,"y":96,"wires":[["96202238.dc2c38"]]},{"id":"f3dee54c.4e5d68","type":"function","z":"de63431d.592d8","name":"","func":"o = \"<IFRAME SRC='https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256' NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH='100%' HEIGHT='100%'></IFRAME>\"\nreturn {template:o};","outputs":1,"noerr":0,"x":290,"y":96,"wires":[["39c946a7.272f82"]]},{"id":"87e898a3.1c91f","type":"ui_group","z":"","name":" Huidig","tab":"fb750634.08c1a8","order":1,"disp":false,"width":"14","collapse":false},{"id":"fb750634.08c1a8","type":"ui_tab","z":"","name":"Weer","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Nice\_to\_have](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@Nice\_to\_have](https://discourse.nodered.org/u/Nice_to_have)\
**Post date:** [24 September 2019 09:30 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/8 "2019-09-24T09:30:22Z")

</div>

Hi Bakman, thanks for your responds,

The image does rotate and shows 6 rain radar images.  
Each image represents 10 minutes.Lets say the iframe is loaded at 11 in the morning, it will show rain radar between 10.30 & 11.30.  
But as long as the page is not refreshed, it will at 15.00, still show the images from 10.30 till 11.30.  
Also, when I manualy trigger the time stamp in node red, it will not refresh the \<iframe.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [24 September 2019 09:42 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/9 "2019-09-24T09:42:14Z")

</div>

Got it.

> **Using `msg.template` :**  
> You can also define the template content via `msg.template` , so you can use external files for example.  
> Template will be reloaded on input if it has changed.

As `msg.template` didn't change, nothing happens, I have added some code to change the iframe each time the inject node is triggered. This works, or at least I see the iframe reloading.

```auto
[{"id":"71cda6b.e5d0fd8","type":"inject","z":"7a62b435.e5dde4","name":"","topic":"","payload":"","payloadType":"date","repeat":"60","crontab":"","once":true,"onceDelay":0.1,"x":334,"y":192,"wires":[["98f7b0fe.6741e"]]},{"id":"b1ef7bc9.41b2","type":"debug","z":"7a62b435.e5dde4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":770,"y":192,"wires":[]},{"id":"82d934f6.ddccc8","type":"ui_template","z":"7a62b435.e5dde4","group":"2f5bb252.c9d756","name":"Buienradar","order":1,"width":"5","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":622,"y":192,"wires":[["b1ef7bc9.41b2"]]},{"id":"98f7b0fe.6741e","type":"function","z":"7a62b435.e5dde4","name":"","func":"d = new Date().getTime()\no = \"<IFRAME SRC='https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256&d=\"+d+\"' NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH='100%' HEIGHT='100%'></IFRAME>\"\nreturn {template:o};","outputs":1,"noerr":0,"x":482,"y":192,"wires":[["82d934f6.ddccc8"]]},{"id":"2f5bb252.c9d756","type":"ui_group","z":"","name":" Huidig","tab":"61b227eb.4f6b9","order":1,"disp":false,"width":"14","collapse":false},{"id":"61b227eb.4f6b9","type":"ui_tab","z":"","name":"Weer","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Nice\_to\_have](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@Nice\_to\_have](https://discourse.nodered.org/u/Nice_to_have)\
**Post date:** [26 September 2019 05:47 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/10 "2019-09-26T05:47:28Z")

</div>

Thanks a million, now it is refreshing

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [19 April 2020 22:43 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/11 "2020-04-19T22:43:57Z")

</div>

I have been struggling with this for more than a few hours now..... Would love a second set of eyes on it.

I have an iframe with a weather widget that I want to refresh every hour.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/856de82860504949dd0cfe2f2799bd162e907241.png)

Here is the flow;

```auto
[{"id":"839ab2d0.2aa88","type":"inject","z":"6364e20c.ebb584","name":"1 hour","topic":"","payload":"","payloadType":"date","repeat":"3600","crontab":"","once":false,"onceDelay":"","x":200,"y":620,"wires":[["b50d0fb3.4c07"]]},{"id":"d09f74c6.1f4a38","type":"ui_template","z":"6364e20c.ebb584","group":"c5116fe8.3a0b1","name":"Weather Widget","order":16,"width":"6","height":"12","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":580,"y":620,"wires":[[]]},{"id":"b50d0fb3.4c07","type":"function","z":"6364e20c.ebb584","name":"refresh iFrame","func":"d = new Date().getTime()\no = \"<IFRAME SRC='https://www.meteoblue.com/en/weather/widget/three/temecula_united-states-of-america_5401395?geoloc=fixed&nocurrent=0&noforecast=0&days=6&tempunit=FAHRENHEIT&windunit=MILE_PER_HOUR&layout=image&d=\\\"+d+\\\"' frameborder='0' style='width: 690px; height: 604px'></IFRAME>\"\nreturn {template:o};","outputs":1,"noerr":0,"x":380,"y":620,"wires":[["d09f74c6.1f4a38"]]},{"id":"c5116fe8.3a0b1","type":"ui_group","z":"","name":"","tab":"5fb8a788.d350d8","disp":true,"width":"6","collapse":false},{"id":"5fb8a788.d350d8","type":"ui_tab","z":"","name":"MeteoBlue","icon":"dashboard","order":15,"disabled":false,"hidden":false}]

```

Using the 'solution' from 2 posts up.....  
I believe that the problem is the date/time stamp is not making its way onto the weather widget and so it is not updating since nothing changes with each hourly inject.  
Here is a snapshot of the developer tools showing the ULR is "wrong";

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a90c8b49336ffaed9815edd4a20f3b45f1f5a8b.png)

If I wait an hour or three and then click the browser refresh button, everything updates so I know the inject button and the weather widget is working, its just not auto refreshing.

Bottom line. How do I get the iframe to update on the Node-RED Dashboard?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [20 April 2020 05:26 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/12 "2020-04-20T05:26:25Z")

</div>

In your function node, you are escaping `d`, not sure why and that is the reason why you see the quotes.

Just use `&d="+d+"'` in the function node.

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [8 May 2020 23:54 UTC](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/13 "2020-05-08T23:54:55Z")

</div>

I had issues with `&d="+d+"`' not refreshing the iframe because the resulting URL was not recognized by the server. (file not found error).  
Simply swapping out the `&d` for `?d` in my function node did the trick.