有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互.

本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向:

1.iframe引入第三方应用

2.嵌入js片段

3.封装成SDK

本篇将主要介绍第一种, 通过iframe嵌入第三方页面, 接下来的几篇文章将分别介绍其他两种方式

使用iframe嵌入是目前使用很广泛的一种嵌入方案, 先看几个案例:

一. 使用案例

  • 搜狐移动端使用iframe嵌入广告:

  • 移动端视频网站使用iframe进行视频嵌入

  • 7724小游戏使用iframe嵌入游戏

二. 实现过程

  • iframe标签引入第三方页面地址

  iframe的src设置为第三方服务器上部署的html页面,并将需要的参数作为URL的一部分传递给该页面

  • 获取参数请求数据

  第三方页面中,首先获取到URL中的参数,根据参数向服务端发起ajax请求,获得页面需要展示的数据

  • 展示页面

  根据获取的数据,将页面展示在主页面上

三. 通信方式

  由于iframe页面与主页面之间不在同下, 在iframe页面和主页面交互时, 会有跨域问题, 不能使用window.parent直接进行交互,目前跨域通信的方案有以下几种: 

  • 使用H5的PostMessage

    HTML5新增的window.postMessage, 是一种安全的,基于事件的消息API.

  • 降级技术

  对于低版本浏览器, 不支持PostMessage, 可使用以下降级方案:

    1.创建与父页面同源的ifame

    2.使用window.name属性

    3.通过hash

    4.使用 ADdobe Flash 对象

  • 使用easyXDM简化跨域

  easyXDM是一个经过充分测试的JavaScript库,有如下优点

    1.简化了跨域iframe之间的通信,并已经解决了所有的痛点.

    2.easyXDM 集成了现有的多种跨域解决方案,针对不同浏览器可以适配最合适的方案

    3.可以将原来写死在页面上的 iframe 改为通过 easyXDM.Rpc() 的方式进行加载,从而更灵活的实现iframe嵌入。

  下面是easyXDM的github地址: https://github.com/oyvindkinsey/easyXDM#readme

以上跨域通信的具体实现不在此详细介绍.

四. 使用iframe嵌入优劣势分析

优势:

  1. 完全独立的DOM环境,不会受主页面的样式影响
  2. 完全独立的window,避免和主页面其他脚本冲突
  3. 不需要跨域进行数据请求
  4. 安全, 主页面无法访问和更改iframe的DOM环境

劣势:

  1. iframe增加了http请求次数
  2. iframe标签创建速度较慢 (可参考博客: https://www.cnblogs.com/sharpxiajun/p/4077515.html)
  3. 跨域iframe通信实现繁琐




广告等第三方应用嵌入到web页面方案 之 使用iframe嵌入的更多相关文章

  1. 广告等第三方应用嵌入到web页面方案 之 使用js片段

    在自己的项目中嵌入过广告的朋友们可能都用过百度联盟, 只需要嵌入如下一段js代码片段, 就可以在自己的项目中嵌入广告, 来获得收益. <script type="text javasc ...

  2. 海康威视 嵌入到web页面相关问题

    因项目上面需求,接触到了海康威视的设备,要把他嵌入到web页面中,所以就开始了爬坑之路 刚开始不知道如何把设备的页面嵌入到项目的web页面中,直到我遇见了他——“WEB3.0控件开发包V1.0.9_C ...

  3. 第三方页面嵌入到web项目的方案 之 使用iframe嵌入

    有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...

  4. Saiku通过iframe嵌入web页面(六)

    Saiku通过iframe嵌入系统页面 前提: Saiku已安装好,并且配置了数据源,熟练了saiku的基本使用. 一.将整个Saiku嵌入页面 在web项目中,新建index.jsp页面,内容如下: ...

  5. 关于ios原声嵌入web页面的问题

    当在一个界面中既有原生又有web的时候,如果想让上下整体滑动的话,我们怎么确定web的高度呢,下面分享一下我的心得 首先在webView的代理方法中我们可以获取到加载完整个web页面的高度 - (vo ...

  6. 分享到微信微博空间等第三方平台的JS代码

    分享功能有利于传播更多优质的内容,所以在web项目中也是比较常用的.今天就抽空整理下常用的分享平台的JS代码.这些代码可以在对应平台的官方网站上生成,官网上对分享内容的参数也有详尽说明.这里只对常用的 ...

  7. 如何本地测试例如QQ登录等第三方接口

    前言:现在基本是个网站就会集成第三方的一些接口,比如QQ登录.分享等等.但是在开发的时候,尤其是没有这方面经验的开发人员来说,调试流程时会显得迷茫,不知道怎么调试.这里就个人的这方面学习摸索做一个总结 ...

  8. 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(上) 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(下)

    微信.QQ.新浪微博等第三方登录,你想知道的都在这了(上):https://www.jianshu.com/p/133d84042483 微信.QQ.新浪微博等第三方登录,你想知道的都在这了(下):h ...

  9. 如何把Power BI嵌入到Web应用中

    (此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这篇其实不是一个操作向导了,主要对Power BI的嵌入特性进行探讨. Power BI ...

随机推荐

  1. git本地克隆时失败: SSL certificate problem

    问题描述 将git包在本地克隆时出现这个错误. 解决办法 找到.gitconfig文件,在http项添加 sslVerify = false. 注: 上面这个是针对单一库的,如果希望对所有库都关闭ss ...

  2. nsq源码阅读笔记之nsqd(二)——Topic

    与Topic相关的代码主要位于nsqd/nsqd.go, nsqd/topic.go中. Topic的获取 Topic通过GetTopic函数获取 GetTopic函数用于获取topic对象,首先先尝 ...

  3. watch.go

    package: } ,) ), ), ) ) , ];]]] :] ].Err()]:] ].Kv.ModRevision         w.resuming = append(w.resumin ...

  4. bzoj2806 [Ctsc2012]Cheat

    我们的目的就是找到一个最大的L0,使得该串的90%可以被分成若干长度>L0的字典串中的子串. 明显可以二分答案,对于二分的每个mid 我们考虑dp:f[i]表示前i个字符,最多能匹配上多少个字符 ...

  5. BZOJ_1097_[POI2007]旅游景点atr_状压DP

    BZOJ_1097_[POI2007]旅游景点atr_状压DP 题面描述: FGD想从成都去上海旅游.在旅途中他希望经过一些城市并在那里欣赏风景,品尝风味小吃或者做其他的有趣 的事情.经过这些城市的顺 ...

  6. BZOJ_2743_[HEOI2012]采花_离线+树状数组

    BZOJ_2743_[HEOI2012]采花_离线+树状数组 Description 萧芸斓是Z国的公主,平时的一大爱好是采花.今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花 .花园足够大 ...

  7. Hadoop权限管理

    1.Hadoop权限管理包括以下几个模块: (1) 用户分组管理.用于按组为单位组织管理,某个用户只能向固定分组中提交作业,只能使用固定分组中配置的资源:同时可以限制每个用户提交的作业数,使用的资源量 ...

  8. 实验吧 ---- 隐写术之so beautiful so white

    因为好久没有写博客,所以今天本宝宝要弥补这个过错,一下子更新许多文章,希望各位小伙伴能够原谅,以后我会加倍努力的! 这一次主要都是实验吧里面的 关于隐写术方面的知识,后续我会上传一些解密工具,希望能够 ...

  9. python接口自动化(二十六)--批量执行用例 discover(详解)

    简介 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到 unittest 里面的 discover 方法来加载用例了.加载用例后,用 unittest 里 ...

  10. HashMap 实现及原理

    1.为什么用HashMap? HashMap是一个散列桶(数组和链表),它存储的内容是键值对(key-value)映射HashMap采用了数组和链表的数据结构,能在查询和修改方便继承了数组的线性查找和 ...