CODEWITHSUNDEEP
elm
arhoskins
arhoskins

Reputation: 373

Elm: how to use an iframe

I want to render an iframe given a String input. For example, I have some string of HTML like this:

str = "<!DOCTYPE html><html><head></head><body>HELLO ELM</body></html>"

In JS I would do this by setting innerHtml on the iframe.

For now, I'm trying to just get the iframe to render anything at all, but haven't had success. I'm trying this sort of thing:

iframe 
    []
    [ body [] [ div [][text "hi"], div [][text "hi"] ] ]

Once I get it working with a list of HTML nodes, I'll move onto making it work with a string. What I'm looking for would be some kind of stringToHtml: String -> List Html method.

Any help or suggestions for getting started with iframes in elm?

Upvotes: 3

Views: 2232

Answers (1)

Chad Gilbert
Chad Gilbert

Reputation: 36375

You can use the srcdoc attribute of an iframe to set the html from an html string, like so:

import Html exposing (..)
import Html.Attributes exposing (srcdoc)

main =
  div [ ]
    [ div [] [ text "Outside the iframe" ]
    , iframe
      [ srcdoc "<div>Inside the iframe</div>" ]
      []
    ]

(IE and Edge do not currently support srcdoc but there is a polyfill)

In the end, though, that's a rather brittle solution because it bypasses the Virtual DOM. At this time, there appears no other way to manipulate iframe content within the Virtual DOM. Could your content instead be stored in another page and referenced through the iframe src attribute?

Upvotes: 7

Related Questions