Iframe with text/javascript?

Dashboard
1

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

2

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?

3

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

4

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.

5

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.

6

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]

7

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

8

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:

<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:

[{"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:

<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.