美文网首页
iframe使用

iframe使用

作者: 我性本傲 | 来源:发表于2019-05-06 17:23 被阅读0次

iframe,这个标签能够嵌入一个完整的网页。

在移动端,iframe 受到了相当多的限制,它无法指定大小,里面的内容会被完全平铺到父级页面上。

同时很多网页也会通过 http 协议头禁止自己被放入 iframe 中。

iframe 标签也是各种安全问题的重灾区。opener、window.name、甚至 css 的 opacity 都是黑客可以利用的漏洞。

因此,在 2019 年,当下这个时间点,任何情况下我都不推荐在实际开发中用以前的 iframe。

当然,不推荐使用是一回事,因为没人能保证不遇到历史代码,我们还是应该了解一下 iframe 的基本用法:

<iframe src="http://www.jianshu.com"></iframe>

这个例子展示了古典的 iframe 用法。

在新标准中,为 iframe 加入了 sandbox 模式和srcdoc 属性,这样,给 iframe 带来了一定的新场景。我们来看看例子:

<iframe sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;amp;page=1">in my gallery</a>."></iframe>

这个例子中,使用 srcdoc 属性创建了一个新的文档,嵌入在 iframe 中展示,并且使用了 sandbox 来隔离。

这样,这个 iframe 就不涉及任何跨域问题了。

相关文章

  • iframe标签与a标签的使用

    iframe定义及用法(使用iframe页面会很卡不建议使用) iframe默认高度为50px,宽度为100px;...

  • 不打开新页面下载文件

    1. 使用IFrame 2. IFrame 模拟POST请求 3. 使用a 标签 4.XMLHttpRequest...

  • 文件导出二

    使用iframe 导出

  • 父子iframe通信问题

    主页面 子iframe 总结:iframe通信主要使用到了postMessage方法,使用方法为:otherWin...

  • 前端预览PDF,Excel,Word,TXT文件

    前端可以使用iframe可以直接预览文件,以下是几种依靠iframe实现在线预览的解决方案。