Elm：如何使用 iframe

Question

我想在给定 String 输入的情况下呈现 iframe。例如，我有一些像这样的 HTML 字符串：

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

在 JS 中，我会通过在 iframe 上设置 innerHtml 来做到这一点。

现在，我试图让 iframe 渲染任何东西，但没有成功。我正在尝试这种事情：

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

一旦我让它与 HTML 节点列表一起工作，我将继续让它与字符串一起工作。我正在寻找的是某种 stringToHtml: String -> List Html 方法。

对于开始使用 elm 中的 iframe 有任何帮助或建议吗？

Answer 1

您可以使用 iframe 的 srcdoc 属性从 html 字符串设置 html，如下所示：

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

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

（IE 和 Edge 目前不支持 srcdoc 但有一个 polyfill）

不过，最后，这是一个相当脆弱的解决方案，因为它绕过了虚拟 DOM。此时，似乎没有其他方法可以在 Virtual DOM 中操作 iframe 内容。您的内容是否可以存储在另一个页面中并通过 iframe src 属性引用？

Elm：如何使用 iframe

Elm: how to use an iframe

elm