iframe跨域通讯

工作中遇到一个问题,IFRAME嵌套了一个外部页面用于统计统计的JS由我们提供,并且需要提供热点图一开始就碰到的问题就是不知道页面高度需要子页面传回页面高度用于将IFRAME拉升到合适高度当时设想的是由统计JS 调用父框架进行设置值但是浏览器直接报错显示安全问题不允许JS跨域执行我就通过另外一种办法实现了跨域通讯因为浏览器检查是否跨域是直接对比URL地址的如果域一致就允许访问我在统计JS中写入了 <iframe src=父框架执行JS地址" width=0 heigh…

HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的整理思路,写到博客里还能做个备忘. 1) 跨域通讯现在做企业项目,前端很不自然的会大量使用iframe标签,我以前在文章里提到iframe是一个效率极其低下的标签,但是如果项目没有什么性能的苛求,使用iframe还是非常的方便的. 使用iframe经常碰到父子窗体通讯的问题,我们看看下面的代码:…

html5跨域通讯之postMessage的用法

转自:http://www.cnblogs.com/wshiqtb/p/3171199.html postMessagePortal.html 页面代码 <!DOCTYPE html> <title>标题</title> <link rel="stylesheet" href="styles.css"> <link rel="icon" href="http://apress.com…

关于iframe跨域实践

提要项目中与到iframe子页面中需要通过top获取在父页面中的全局变量的需求,由于App部署的缘故,导致父页面和iframe子页面分别在不同的端口下,导致iframe跨域现象,通过查阅资料进行问题解决. 浏览器有一个同源策略,第一种限制就是不能通过ajax的方法去请求不同源的文档.第二种限制是不能浏览器中不同域的框架之间是不能进行js的交互操作的. 不过有一点,不同框架之间(父子框架和同辈框架),是能够获取到彼此的window对象的,但是却不能获取到window对象的属性和方法(html5中…

XDomainRequest IE8&IE9 cors 跨域通讯的处理方法

版权声明:避免百度一下通片同一篇文章,未经博主允许不得转载.本博客作为笔记使用,正确性请自行验证. https://blog.csdn.net/u014071104/article/details/80361888 这篇文章纯属湿货. 随着MVVM框架的大行其道,前端接触网路请求的机会越来越普及. 跨域也开始成为开发的家常便饭. 跨域处理方法有以下几点: iframe script(JSONP) cors iframe是N年前的东西,在邮件网站上可以看到它的影子 JSONP一直都存在,在…

JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的…

javascript跨域、iframe跨域访问

1.window 对象浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览器就会为原始文档创建一个 window 对象,再为每个框架创建额外的 window 对象 2.contentWindow contentWindow属性是指指定的frame或者iframe所在的window对象(frame/iframe在window里面) 3.获取frame/iframe跨域win…

iframe跨域cookie问题

今天在项目里面遇到了iframe跨域不能写cookie的问题.应用场景是这样的:有A和B两个业务,A要通过iframe的方式嵌入B,但是在ie下A不能通过写cookie的方式记录信息,在firefox和chrome下可以正常写cookie.如果将ie的安全级别调到低,接受未明确的cookie,就可以.最后采用的方案是在A页面检查没有cooke信息,就临时跳转到A域名下的页面写cookie,然后再跳转回B页面. 版权声明:本文为博主原创文章,未经博主允许不得转载.…

iframe跨域访问

js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容:如果支持contentDocument也可以直接document.getElementById("myframe&…

利用location.hash+iframe跨域获取数据详解

前言如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段js代码,同样都是利用和子窗口之间的通信完成数据传输,同样要针对同源策略做出处理. location.hash和锚点要理解location.hash+iframe跨域获取数据的机制,先得知道什么是location.hash,楼主买一送一,把锚点也一起介绍了. 其实锚点很简单,也相信大家都有用过.纳尼…

利用window.name+iframe跨域获取数据详解

详解前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包…

CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

1.IE浏览器iframe跨域丢失Session问题在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上可以找到很多相关的文章,如果网站可以采用设置Web.Config中的配置: mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424" sqlConnectionString="data s…

在IE浏览器中iframe跨域访问cookie/session丢失的解决办法

单点登录需要在需要进入的子系统B中添加一个类,用于接收A系统传过来的参数: @Action(value = "outerLogin", results = { @Result(name = "redirect", type = "redirect", location = "${innerUrl}") }) public String outerLogin() { try { if (userName != null &…

js iframe跨域访问

1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和location.hash 什么是跨域? ................................................................................................................................…

IFrame跨域访问自定义高度

由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属于不同域,JS禁止跨域访问. 解决方案:使用一个连接A,B应用的桥梁页面bradge.jsp来解决. 准备: 应用A localhost:8080 主页面:main.jsp/html <div class="information_box" style="display:b…

iframe跨域通信实战

"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题也挺多. 一直也在思考一些问题: 如何把自己遇见的问题好好的理解并且总结? 如何很好的学习新知识,不只是停留在用的基础上? -- 上面的问题我一直在尝试更适合我的方法,暂时就不扯淡了,先尝试一下把这段时间过程中遇见的问题总结下,然后争取给看文的你以我的方式描述清楚,我想我应该就把第一个问题解决了. 简介项目…

IFrame跨域访问&&IFrame跨域访问自定义高度

1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属于不同域,JS禁止跨域访问. 解决方案:使用一个连接A,B应用的桥梁页面bradge.jsp来解决. 准备: 应用A loc…

子页面iframe跨域执行父页面定义的JS方法

问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child.html 同域时 iframe 调用父页面的JS方法在同域的情况下,子iframe页面可以很方便地直接调用父页面定义的JS方法:window.parent.fn(); 或者 window.top.fn();window.self: 当前窗口自身的引用window.parent: 上一级父窗口的引…

iframe 跨域问题解决方案利用window.name+iframe跨域获取数据详解

iFrame跨域的方式

4种通过iframe跨域与其他页面通信的方式不同域下的iframe不能进行操作. 1.location.hash: 在url中,http://www.baidu.com#helloword的#helloworad就是location.hash,改变hash值不会导致页面刷新,所以可以利用hash值来进行数据的传递,当然数据量是有限的.假设localhost:8080下有文件cs1.html要和localhost:8081下的cs2.html传递消息,cs1.html首先创建一个隐藏的ifram…

解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.html页面引入B.html页面,下面看看A.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head>…

iframe跨域数据传递

项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>Page_1</title> </head> <body style="backgrou…

iframe中子父页面跨域通讯

目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发送信息,其他页面要通过window.addEventListener()监听事件来接收信息: #跨域发送信息 #window.postMessage()语法 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow…

iframe跨域+

script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些技术,实现跨域请求. 1.iframe+window.name; 2.iframe+location.hash; 3.iframe+window.postMessage. 另,在最后赋予“灯标”技术阐述. 一.iframe + window.name实现跨域 window对象有个name属性,该属性…

完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多人都头疼万分.百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题.网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用).难道真的没有一种可行的解决方案了吗? No…

【HTML】iframe跨域访问问题

概述本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.101 (64-bit) OS:Win8.1 Chrome访问服务器端HTML文件呈现的结果 Chrome访问本地HTML文件呈现的结果本地访问的HTML文件Iframe没有根据Iframe里面的页面类容自适应高度 2.Iframe自适应高度代码在index.html文件中间中添加Iframe页面,…

【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不…

对iframe跨域通信的封装

github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法.1. 在top页面中建立方法供内部页面使用 function testFun (tex…

[转载]iframe跨域

最近做的一个项目中需要ajax跨域取得数据,如果是在本域中确实没有问题,但是放到二级域和其他域下浏览器直接就弹出提示框:“该页正在访问其控制范围之外的数据,这有些危险,是否继续" 1.什么引起了ajax跨域不能的问题 ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 2.有什么完美的解决方案么? 没有.解决方案有不少,但是只能是根据自己的实际情况来选择. 具体情况有: 一.本域和子域的相互访问: www.aa…

iframe跨域通信方案

概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象.更详细的说明可以看下表: 对于主域相同子域不同的通信方法这里不一一列举了,这里主要讲解一下跨主域的通信问题. postMessage方法 window.postMe…

【iframe跨域通讯】的更多相关文章