Iframe reloads every time update is called

[rl-king]

This surprised me

If you render html containing an iframe it reloads the content every time you call update. This results in the iframe data being reloaded.

Currently working solution

Use lazy

Might be nice

A note in the docs on how why you might need to use lazy in combination with the toHtml functions

SSCCE

Problematic, keyed but not lazy

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Html.Keyed as Keyed
import Markdown exposing (defaultOptions)


main : Program () () Msg
main =
    Browser.sandbox
        { init = ()
        , view = view
        , update = \_ _ -> ()
        }


type Msg
    = Foo


view : () -> Html Msg
view _ =
    div []
        [ button [ onClick Foo ] [ text "click" ]
        , Keyed.node "div"
            []
            [ ( "foo"
              , Markdown.toHtmlWith { defaultOptions | sanitize = False }
                    []
                    iframeString
              )
            ]
        ]


iframeString : String
iframeString =
    """<iframe width="560" height="315" 
    src="https://www.youtube-nocookie.com/embed/o_4EX4dPppA" 
    frameborder="0" allow="accelerometer; autoplay; encrypted-media; 
    gyroscope; picture-in-picture" allowfullscreen></iframe>"""

https://ellie-app.com/4Pj7WpKzTHKa1

Possible solution, lazy

provided by @zwilias

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Html.Lazy as Lazy
import Markdown exposing (defaultOptions)


main : Program () () Msg
main =
    Browser.sandbox
        { init = ()
        , view = view
        , update = \_ _ -> ()
        }


type Msg
    = Foo


view : () -> Html Msg
view _ =
    div []
        [ button [ onClick Foo ] [ text "click" ]
        , Lazy.lazy markdown iframeString
        ]

markdown : String -> Html msg
markdown content =
    Markdown.toHtmlWith
            { defaultOptions | sanitize = False }
            []
            content


iframeString : String
iframeString =
    """<iframe width="560" height="315" 
    src="https://www.youtube-nocookie.com/embed/o_4EX4dPppA" 
    frameborder="0" allow="accelerometer; autoplay; encrypted-media; 
    gyroscope; picture-in-picture" allowfullscreen></iframe>"""

https://ellie-app.com/4PkBNVJsKnka1

[NPCRUS]

both links you provided are to the same app