Why won't iframe open on local file?

Configuration Frontend
1

I’m trying to stop full refresh of web pages when I jump from one page in a Lovelace view to another. For the Node-RED mail GUI I have made a local html, /home/pi/Homeassistant/www/nodered.html that I’m trying to open in an iframe. The code in the file is:

<!DOCTYPE html>
<html lang="no">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="60">
    <title>Node-RED</title>
  </head>
  <body>
   <iframe src="http://192.168.3.1:1880"  frameborder="0"></iframe>
  </body>
</html>

The code for the card is:

type: vertical-stack
cards:
  - type: iframe
    url: /local/nodered.html
    aspect_ratio: 70%

This is giving me a 404. Can that be because I don’t have the configuration in .homeassistant, but a normal, visible directory called Homeassistant on the Pi? I changed to that when I started to use Docker instead of core installation.

Edit: Probably not, adding a directory called .homeassistant and copying in the www directory there didn’t help.

2

If I do the same it works for me. Are you getting the 404 on “nodered.html” or “http://192.168.3.1:1880”?

Normally the “www” folder is under “config” - if you use Studio Code Server or File Editor from within HA it is easier to see the correct location.

Note that when I first tried it, I was accessing HA over SSL, so the attempt to load non-SSL was blocked (but not 404).

3

Thanks for answering! Do you mean that there should be a directory under the configuration directory (which contains automation.yaml, configuration.yaml and so on) called “config”, so the file should be in “my configuration directory/config/www”? I tried that too, without any result.

And I’m pretty sure the 404 is that the web server in Hass (if you can call it a web server, I guess it’s more of a web forwarder) is not seeing the file, because I got the same error when I tried this code in the html file:

<!DOCTYPE html>
<html lang="no">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="60">
    <title>Node-RED</title>
  </head>
  <body>
   Node-RED
  </body>
</html>

This should give me a white webpage with the text Node-RED at the top, and it’s not dependent on finding the Node-RED server.