榆树：如何使用 iframe答案

【问题标题】：Elm: how to use an iframe榆树：如何使用 iframe
【发布时间】：2015-12-31 00:58:56
【问题描述】：

我想在给定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 有任何帮助或建议吗？

【问题讨论】：

标签： elm

【解决方案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 属性进行引用？

【讨论】：