榆木:如何使用iframe [英] Elm: how to use an iframe

查看:61
本文介绍了榆木:如何使用iframe的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在输入 String 的情况下渲染 iframe 。例如,我有一些这样的HTML字符串:

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

在JS中,我可以通过设置 innerHtml 在 iframe 上。



目前,我正试图让 iframe 来渲染所有内容,但还没有成功了。我正在尝试这种事情:

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

一次我将其与HTML节点列表一起使用,接下来将继续使其与字符串一起使用。我正在寻找的是某种 stringToHtml:String->列出HTML 方法。



对榆木iframe入门有任何帮助或建议吗?

解决方案

您可以使用 iframe的 srcdoc 属性可通过html字符串设置html,例如:

 导入HTML暴露(..)
导入HTML。属性暴露(srcdoc)

main =
div []
[div [] [文本 iframe外部]
,iframe
[srcdoc< div>在iframe内部< / div> ]
[]
]

(IE和Edge当前不支持 srcdoc ,但是有一个 polyfill src 属性引用吗?


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?

解决方案

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?

这篇关于榆木:如何使用iframe的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆