Iframe not displaying site content

Thanks in advance,

I’m trying to use iframe to display a cut down version of the cascading text at the top of https://www.thelcars.com/

I’ve cut it down and hosted it on a dedicated website (detailed below) however, the web page isn’t being displayed in Home Assistant. There’s no error or message, it’s just blank. It works fine in any browser but, not in iframe.

Anyone got any ideas?

NOTES: you’ll need to install the LCARS theme to reproduce the issue (GitHub - th3jesta/ha-lcars: LCARS theme for Home Assistant)

views:
  - theme: LCARS Kronos
    title: Home
    path: '1'
    icon: mdi:alarm-panel
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: '##  '
            card_mod:
              class: middle
          - type: iframe
            url: https://lcars.the-hancocks.com/niagara.html
            card_mod:
              class: footer
          - type: markdown
            content: '##  '
            card_mod:
              class: header
          - type: markdown
            content: '# Security Station'
            card_mod:
              class: middle
          - type: alarm-panel
            states: []
            entity: [REDACTED]
            name: ' '
            card_mod:
              class: middle
          - type: entities
            entities:
              - entity: [REDACTED]
                name: Doors
            card_mod:
              class: footer

See the warning at the top of the page:

The reverse is true too. If you are trying to display a site accessed via https and your home assistant is accessed via http it won’t work either.

Nope… thought about that… I stood up another site using http only and I’m also hosting it locally on an iis server using http and the same thing happens. I can see it in a browser on other devices in the same network but iframe won’t display it.

views:
  - theme: LCARS Kronos
    title: Home
    path: '1'
    icon: mdi:alarm-panel
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: '##  '
            card_mod:
              class: middle
          - type: iframe
            url: http://[REDACTED IP ADDRESS]/niagara.html
            card_mod:
              class: footer
          - type: markdown
            content: '##  '
            card_mod:
              class: header
          - type: markdown
            content: '# Security Station'
            card_mod:
              class: middle
          - type: alarm-panel
            states: []
            entity: [REDACTED]
            name: ' '
            card_mod:
              class: middle
          - type: entities
            entities:
              - entity: [REDACTED]
                name: Doors
            card_mod:
              class: footer

I had the same problem trying to display a utilisation graph from my router’s web interface. Something about cross-origin resource sharing being disabled.

What if I’m now hosting it locally in Home Assistant?

type: iframe
url: http://homeassistant.local:8123/local/LCARS/niagara.html

I can see it fine on a browser by navigating to http://homeassistant.local:8123/local/LCARS/niagara.html but, Home Assistant still displays a blank iframe section.

Yes but it is not in a frame when you visit it in a browser.

Without seeing the page source it’s hard to say, though even seeing may not help I’m no web designer.

My iframe(s) have not been working for a while but I didn’t have time to mess with it. Got around to checking it out today and found this, in case anyone else is having problems.

Removed integration

The integration you requested has been removed.

Possible reasons for the removal:

  • It’s unmaintained.
  • It’s no longer working.
  • It does not comply with the rules described in our ADR’s.
  • It does not follow our design guidelines for integrations.

For alternative integrations have a look at the list of our integrations here.

1 Like