# Iframe with text/javascript?

**URL:** <https://discourse.nodered.org/t/iframe-with-text-javascript/7127>\
**Category:** Dashboard\
**Created:** [22 January 2019 07:30 UTC](https://discourse.nodered.org/t/iframe-with-text-javascript/7127 "2019-01-22T07:30:31Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![hermann1514](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hermann1514/32/52422_2.png) [@hermann1514](https://discourse.nodered.org/u/hermann1514)\
**Post date:** [22 January 2019 07:30 UTC](https://discourse.nodered.org/t/iframe-with-text-javascript/7127/1 "2019-01-22T07:30:31Z")

</div>

Hello,  
I would like to enter the weather of Darksky via iframe. Unfortunately, then nothing is displayed there. I think it's the javascript. Can someone help me?  
It has always worked with other sites.

The following link should be inserted:

```
<script type='text/javascript' src='https://darksky.net/widget/default/53.0758,8.8072/us12/de.js?width=100%&height=350&title=Bremen&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=us&htColor=333333&ltColor=333333&displaySum=yes&displayHeader=yes'></script>

```

Ich habe diesen dann folgendermaßen im Dashboard Template eingetragen:

`<iframe><script type='text/javascript' src='https://darksky.net/widget/default/53.0758,8.8072/us12/de.js?width=100%&height=350&title=Bremen&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=us&htColor=333333&ltColor=333333&displaySum=yes&displayHeader=yes'></script></iframe>`

Someone an idea?

greeting  
Hermann

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [22 January 2019 08:54 UTC](https://discourse.nodered.org/t/iframe-with-text-javascript/7127/2 "2019-01-22T08:54:18Z")

</div>

Have you tried the http by it self to see what is returned?  
Is the iframe big enough to see what is returned?  
What does the rest of the flow look like?

---

<div class="post-metadata">

**Author:** ![hermann1514](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hermann1514/32/52422_2.png) [@hermann1514](https://discourse.nodered.org/u/hermann1514)\
**Post date:** [22 January 2019 09:00 UTC](https://discourse.nodered.org/t/iframe-with-text-javascript/7127/3 "2019-01-22T09:00:24Z")

</div>

Hi.  
If i only use the http link - without the script tag - i receive the Picture but with a JavaError:

> var customContainer = document.getElementById("customize-script-container"); if(customContainer === null) document.write(" "); else document.getElementById("customize-script-container").innerHTML = "

It's on ly a Dashboard Template in the flow.

Here is the FLOW:

`[{"id":"15ac8e15.226c32","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"47bbc6d.7d54d38","type":"ui_template","z":"15ac8e15.226c32","group":"32a89da0.adb5f2","name":"","order":1,"width":0,"height":0,"format":"<iframe><script type=\"text/javascript\" src=\"https://darksky.net/widget/default/53.0758,8.8072/us12/de.js?width=100%&height=350&title=Bremen&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=us&htColor=333333&ltColor=333333&displaySum=yes&displayHeader=yes\"></script></iframe>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":584,"y":141,"wires":[[]]},{"id":"32a89da0.adb5f2","type":"ui_group","z":"","name":"Group 2","tab":"27de1f59.f5767","order":2,"disp":true,"width":"11","collapse":false},{"id":"27de1f59.f5767","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":4}]`

Idea?

Regards  
Hermann

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [22 January 2019 09:14 UTC](https://discourse.nodered.org/t/iframe-with-text-javascript/7127/4 "2019-01-22T09:14:29Z")

</div>

If you use a different http statement and it works, then the JavaError is the issue. That means the HTTP you are sending has a problem with it.

---

<div class="post-metadata">

**Author:** ![hermann1514](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hermann1514/32/52422_2.png) [@hermann1514](https://discourse.nodered.org/u/hermann1514)\
**Post date:** [22 January 2019 09:43 UTC](https://discourse.nodered.org/t/iframe-with-text-javascript/7127/5 "2019-01-22T09:43:52Z")

</div>

When i use only the http statement then tje javascript was not executed and then i receive the error. When i use the java script statement - then there is nothing.

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [22 January 2019 10:29 UTC](https://discourse.nodered.org/t/iframe-with-text-javascript/7127/6 "2019-01-22T10:29:40Z")

</div>

As I understood it the iframe tag is to embed a full web page into another, so the iframe tag takes a webpage-url.

What you could do which is a fudge, is to use the iframe link to a local URL served from Node-RED. And then have a flow which is `[HTTP-IN]`-`[TEMPLATE]`(HTML page containing javascript you want)-`[HTTP OUT]`

---

<div class="post-metadata">

**Author:** ![hermann1514](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hermann1514/32/52422_2.png) [@hermann1514](https://discourse.nodered.org/u/hermann1514)\
**Post date:** [23 January 2019 10:18 UTC](https://discourse.nodered.org/t/iframe-with-text-javascript/7127/7 "2019-01-23T10:18:19Z")

</div>

It looks like this is a problem from the widget itself. In other forums, I have read exactly the same problems - but no solution.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [23 January 2019 10:50 UTC](https://discourse.nodered.org/t/iframe-with-text-javascript/7127/8 "2019-01-23T10:50:57Z")

</div>

Hi,

You are not using `<iframe>` properly.

An iframe is used to load an external html page. It loads the page identified by its `src` attribute:

```auto
<iframe src="https://nodered.org"></iframe>

```

Any HTML you add inside the `<iframe>` tag is only displayed if the browser does not support iframes. So your `<script>` tag is ignored. The right approach would be to forget the `<iframe>` tag and just put the script tag in the ui\_template node.

However... that particular script doesn't like being embedded in the way angular does it - you get the following error in the console:

> Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

So... you can use the approach @ukmoose suggested; create an HTTP In flow that returns a complete page containing the script, and then add an iframe to embed the page generated by that flow:

This is the HTTP-Template flow:

```auto
[{"id":"b693c8bd.8fce58","type":"http in","z":"538e49f9.1c9f18","name":"","url":"/widget","method":"get","upload":false,"swaggerDoc":"","x":340,"y":340,"wires":[["725e4327.04fd8c"]]},{"id":"725e4327.04fd8c","type":"template","z":"538e49f9.1c9f18","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html><head></head><body><script type='text/javascript' src='https://darksky.net/widget/default/53.0758,8.8072/us12/de.js?width=100%&height=350&title=Bremen&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=us&htColor=333333&ltColor=333333&displaySum=yes&displayHeader=yes'></script></body></html>","output":"str","x":500,"y":340,"wires":[["52adc52d.6dabcc"]]},{"id":"52adc52d.6dabcc","type":"http response","z":"538e49f9.1c9f18","name":"","statusCode":"","headers":{},"x":630,"y":340,"wires":[]}]

```

Then a ui\_template node with:

```auto
<iframe src="http://localhost:1880/widget"></iframe>

```

although you'll need to change localhost:1880 to the appropriate thing to access your node-red instance.