10个酷炫的Javascript iframe库

iframe可以将用户交互构建到可嵌入的“跨域组件”中,从而使用户无需重定向就可以与其他网站交互。从历史上看,它们的评价并不高,因为在日常网站中它们几乎只用于广告和视频,而且加载速度很慢,因此用户体验非常糟糕。因此,在本文中收集了一些JavaScript库来解决iframe和弹出窗口的一些主要问题。

Zoid

支持跨域的组件和工具包,在其他不同域上渲染iframe或弹出窗口,并可以传递对象和函数等数据,从子窗口以本地方式调用回调,不用担心消息传递和跨域限制,可以从你的网站分享公共组件,然后可以直接将组件渲染为React,Vue或Angular组件!这样可以形成事半功倍的效果,但是100%使用iframe和弹出窗口来进行跨域!

Zoid

 

Postmate

Postmate是一个基于promise api 去做消息传递的。它可以很轻易地让父页面去跟跨域的子页面进行通讯。

Postmate

 

Iframe Resizer

Iframe Resizer可以链接页面,嵌套和多层级iFrame,保持跨域iFrame大小相同,并支持调整窗口/内容的大小。

Iframe Resizer

 

Iframely

这是Iframely API和解析器的自托管版本。 iframely为自适应网页嵌入和语义化提供了快速,简单的API。这些解析器通过200多个自定义域插件以及对由Iframely的白名单提供支持的oEmbed,Open Graph和Twitter Card的通用支持,涵盖了1800多个域。白名单文件是从iframely.com数据库中提取的,并且会自动更新。白名单可以自定义,也可以创建自己的白名单文件。

Iframely

 

React Frame Component

这个React组件允许您将整个React应用或每个组件封装在iFrame中。

React Frame Component

 

Lazyframe

延迟加载iframe的无依赖js库。

Lazyframe

Seamless.js

Seamless.js是一个可以让用户看不出网页的内容是本站的还是其他域的。它是一个无依赖的js库,让你无缝地链接你需要的内容

Seamless.js

 

Porthole

Porthole是一个小型Javascript库,可轻松安全地与跨域iFrame通信。Porthole依靠隐藏的iFrame(代理)交换信息。调用方设置一个URL参数并传递消息。代理通过与被调用方相同的来源达成目的,从而使用事件调用回调方法,该事件包含从url片段读取的消息。

Porthole

 

Scroll Frame

使用iframe保持页面之间的滚动位置。对于无限滚动页面特别有用。 scrollFrame会劫持用户单击的元素,以匹配与您传入的元素选择器匹配的元素,而不是重新加载页面,它会在视口顶部附加一个类似于弹窗的iframe,并指向该元素的href。然后,它使用HTML5历史记录API使后退按钮功能达到目的。

Scroll Frame

 

Responsiveiframe

让你的iframe们适应到你的自适应网站

Responsiveiframe