如何在一个网页中显示外部页面?

发表于 | 分类于 | 阅读次数:
如何在一个网页中显示多个外部页面。

如果是你碰到这样的需求，你会如何去解决？

今天在Segment Fault看到的这个问题。我的第一反应就是使用Iframe来实现。

但是题主明确说明了，需要非Iframe的实现方式。因为iframe会导致内存泄漏。

Iframe会导致内存泄漏？

我还没有接触过这类问题，正好学习一下。

查了一下资料，发现Iframe已经是一个过时的技术了，已被新的技术所取代。现在更推荐使用Embed标签来进行页面和资源的嵌入，它定义了一个外部应用程序的容器。

而Iframe则存在着以下几个坑点：

  1. Iframe相当于打开一个网页，同时会请求嵌入页面资源，但是又无法释放内存。
  2. Iframe会阻塞主页面的onload事件，必须在页面嵌入结束才触发。
  3. Iframe和主页面共享连接池，浏览器对同个域的连接有限制，会影响页面对资源的并行下载。
  4. Iframe在移动端的支持并不好。
  5. Iframe对统计代码不友好。
  6. Iframe的尺寸自适应问题是个坑。

参考: 为什么前端尽量少用iframe？

实现

那么除了Iframe，我们可以如何去实现上述需求呢。

Object标签

object 标签 它定义了HTML文档中的嵌入对象。可用于HTML文件和多媒体内容，如音频，视频，小程序，ActiveX，PDF和Flash或其他插件）。

1
2
3
<object data="http://stackoverflow.com" width="400" height="300" type="text/html">
    Alternative Content
</object>

Embed标签

embed 嵌入标签。它定义了一个外部应用程序的容器，例如一个插件，也可以用于显示一个HTML页面。

1
<Embed src="http://stackoverflow.com" width="400" height="300" />

参考资料

How to Show External website inside another page without iFrame?

有钱，任性！！！