iframe 直接加载 HTML 代码

HTML About 897 words

HTML5

srcdoc

<iframe seamless frameborder=0 scrolling=no width="100%" height="300px" srcdoc='<html><body style="margin: 0">Hello, <b>world1</b>.</body></html>'></iframe>

JS 脚本

src='javascript: ""'，但更推荐将双引号改为反引号

<iframe seamless frameborder=0 scrolling=no width="100%" height="300px" src='javascript: `<html><body style="margin: 0">Hello, <b>world2</b>.</body></html>`'></iframe>

data url

<iframe src='data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%20style=%22margin:%200%22%3EHello,%20%3Cb%3Eworld3%3C/b%3E.%3C/body%3E%3C/html%3E'></iframe>

动态加载

<iframe id="foo"></iframe>
<script>
    let iframe = document.getElementById('foo'),
        iframedoc = iframe.contentDocument || iframe.contentWindow.document;
    iframedoc.body.innerHTML = 'Hello world4';
</script>

Views: 3,471 · Posted: 2021-06-03

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓