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

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

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

1.iframe引入第三方应用

2.嵌入js片段

3.封装成SDK

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

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

一. 使用案例

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

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

7724小游戏使用iframe嵌入游戏

二. 实现过程

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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Helvetica; color: #404040 }
span.s1 { }

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

获取参数请求数据

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Helvetica; color: #404040 }
span.s1 { }

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

展示页面

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: right; font: 10.0px Helvetica; color: #404040 }
span.s1 { }

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

三. 通信方式

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

使用H5的PostMessage

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #404040 }
span.s1 { }

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

降级技术

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #404040 }
span.s1 { }

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

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

　　　　2.使用window.name属性

　　　　3.通过hash

　　　　4.使用 ADdobe Flash 对象

使用easyXDM简化跨域

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #262626 }
span.s1 { }

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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #262626 }
span.s1 { }

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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "Trebuchet MS"; color: #000000 }
span.s1 { }

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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000 }
span.s1 { }

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

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

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

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

优势:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #435b66 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #435b66; min-height: 22.0px }
span.s1 { }
span.s2 { color: #435a66 }

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

劣势:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000; min-height: 22.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #0000ff }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #435b66; min-height: 22.0px }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #435b66 }
span.s1 { }
span.s2 { text-decoration: underline }
span.s3 { }

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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Helvetica; color: #404040 }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 18.0px Helvetica; color: #404040 }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Helvetica; color: #404040 }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #435b66 }
span.s1 { }

第三方页面嵌入到web项目的方案之使用iframe嵌入的更多相关文章

广告等第三方应用嵌入到web页面方案之使用iframe嵌入
有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...
web项目自动化测试方案预研
一. 网上方案整理 Watir.Watir-Webdriver.Selenium2.QTP区别 Waitr与Watir-WebDriver有什么区别? Watir是非常优秀的一款自动化测试工具.其使 ...
免费生成二维码接口，可直接嵌入到web项目中，附带嵌入方法，任意颜色二维码，任意大小二维码！
在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿 ...
eclipse导入第三方jar包进入web项目的方法
此方式是没有用maven进行构建的项目,纯动态项目. 具体方法: 1.通过Java Build Path导入. 比如我项目上要用servlet-api.jar这个包,我所用的web容器是tomcat, ...
在页面上获取web项目信息
获取协议名称:request.getScheme() 获取域名:request.getServerName() 获取项目名称:request.getContextPath() 使用EL表达式获取项目名 ...
基于node-webkit的web项目打包方案
下载node-webkit https://github.com/rogerwang/node-webkit 找到Downloads这一小节,然后下载对应平台的node-webkit预编译包.(为了介 ...
web项目超时方案
1. 场景描述平台使用的Greenplum(内核是postgresql8.2)集群存储大数据量数据(每天一个表大概3亿),因为数据量比较大,所以在使用上有些限制,一是操作限制:二是不限制,但是到一定 ...
如何设置 web 项目打开的默认页面
引言我们在创建 Web 项目启动 Tomcat 会自动打开一个默认 index.jsp 页面,这个页面是创建 Web 项目时就自动生成的.那么,如何设置 web 项目打开的这个的默认页面,改为自己的 ...
Hadoop Web项目--Mahout0.10 MR算法集锦
1. 涉及技术及下载项目开发使用到的软件有:Myeclipse2014,JDK1.8.Hadoop2.6,MySQL5.6.EasyUI1.3.6,jQuery2.0,Spring4.1.3,Hib ...

随机推荐

CSS用HTML中的style属性替换
废话不多说上代码: 1.用CSS给文字添加背景色: <html> <head> <style type="text/css"> body {ba ...
Ubuntu问题：E45: 'readonly' option is set (add ! to override)错误解决
问题描述:E45: 'readonly' option is set (add ! to override) 问题分析:该错误为当前用户没有权限对文件作修改问题解决: 输入 :w !sudo tee ...
jquery 遍历表格，需要表格中每个td的内容
$("table tr:gt(0)").each(function(i){ alert("这是第"+i+"行内容"); $(this).ch ...
linux tcp重传多会导致软中断在各个核很不均匀么？
网络不稳定,会导致某些核的软中断很高么?那么,下面我们来分析下这个论断的准确性. 环境描述: 网卡软中断进行了绑核.设备具备80个核,960个网卡中断,没开启bbr,全部是tcp呼叫. # cat / ...
关于eclipse 与OpenCV 配置频繁报错的问题总结Program "C:/SDK/android-ndk-xxx/ndk-build.cmd" is not found in PATH报错的解决！
2018-01-3116:58:12 Program "C:/SDK/android-ndk-r8/ndk-build.cmd" is not found in PATH 今天这一 ...
django url路由参数错误
出现错误: TypeError get() got an unexpected keyword argument 'teacher_id 出错原因: view类中,get方法获得了一个多余的额参数,这 ...
Linux make nginx 的时候报错
报错如下: `conf/koi-win' and `/usr/local/nginx/conf/koi-win' are the same file 原因: 可能在编译 nginx 的时候步骤不对 ...
python 控制台颜色
python_控制台输出带颜色的文字方法控制台输出带颜色的文字方法: 在python开发的过程中,经常会遇到需要打印各种信息.海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可 ...
java 中字符串比较equals()和equalsIgnoreCase()的区别
1.使用equals( )方法比较两个字符串是否相等 boolean equals(Object str) 这里str是一个用来与调用字符串(String)对象做比较的字符串(String)对象. 如 ...
js中的一元加法和一元减法
大多数人都熟悉一元加法和一元减法,它们在 ECMAScript 中的用法与您高中数学中学到的用法相同. 一元加法本质上对数字无任何影响: var iNum = 20; iNum = +iNum; al ...

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

第三方页面嵌入到web项目的方案 之 使用iframe嵌入的更多相关文章

随机推荐

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

第三方页面嵌入到web项目的方案之使用iframe嵌入的更多相关文章