iframe父子级页面传值支持跨域访问javascript

今天在使用parent.fn()调用父页面方法时发现并没有成功调用到父级iframe中的方法，后来发现是两个iframe并不在同一域名下，在网上查过后，发现H5中message方法恰好支持，闲话不多说了，上代码

父界面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="js/cdIframe.js" ></script></head><body><!--注意该页面在打开时不能使用http://192.168.1.222--><iframe src="http://192.168.1.222:8020/mywork1/new_file.html" width="" height="" id="iframe"></iframe></body><script type="text/javascript">/** receiveMessage (type, callback)* type 子页面传值时进行匹配的字段名称* callback(data, node)* node 子页面所传的值* * */receiveMessage("istype", function (data, node) {console.log(node)//子页面中所填写类型为"istype"的数据})</script></html>

子页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script><script type="text/javascript" src="js/cdIframe.js" ></script><title></title></head><body><button id="btn">按钮</button><script>/** postMessage(type, data, direction)* param： type content direction* istype 父页面接收时进行匹配的字段名称* top    标记该数据向父级页面传输* * */postMessage("istype", "这是一个句话", "top")</script></body>
</html>

以下就是js代码：

/** cdIframe.js* iframe中跨域通信* 2018-8-9* Y J* * */
//父窗体中监听消息
function receiveMessage (type, callback) {window.addEventListener('message', function(e) {if(e.data.type == type){callback(e.data, e)};});
};
//子窗体中监听消息
function postMessage(type, data, direction) {var post = {type: type,data: data};if(direction == "top"){window.parent.postMessage(post, '*');}else{window.frames[0].postMessage(post,'*');   //若是向子页面传值则使用该句};
};

以上就是所有的代码了，如果哪里写的不对还请多多指正。

下载地址：https://gitee.com/yangjunhouse/dome/tree/master/dome-cdIframe

iframe父子级页面传值支持跨域访问javascript相关推荐

html的页面怎样直接跨域访问,【HTML】iframe跨域访问问题
概述本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.10 ...
如何判定API接口是否支持跨域访问
1.背景同一个h5页面需要访问多个不同的域名下的地址 2.判定方式方式一在浏览器控制台执行如下代码: var xhr = new XMLHttpRequest(); xhr.open('GET' ...
Nginx配置服务器静态文件支持跨域访问
2019独角兽企业重金招聘Python工程师标准>>> 在server中配置 add_header Access-Control-Allow-Origin *;add_header ...
百度网盘播放地址html,百度云web播放器cyberplayer的flv播放地址一定要支持跨域访问如何设置...
cyberplayer, 官方demo 百度云web播放器: Cyberplayer3.0 Demo http://cyberplayer.bcelive.com/demo/new/index.htm ...
tomcat项目支持跨域访问
在web.xml中添加如下filter <filter><filter-name>CorsFilter</filter-name><filter-class& ...
iframe 跨越访问_js iframe跨域访问
1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...
js图片下载(支持跨域/解决Access-Control-Allow-Origin)
一.思路使用canvas绘制图片使用toBlob方法将canvas图片转换为文件使用a标签的download属性下载这个canvas转化生成的图片文件 canvas.toBlob() 将canv ...
AJAX跨域访问解决方案
Case I. Web代理的方式 (on Server A) 即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果.此方案可以解决 ...
第一百一十期:详解SpringBoot应用跨域访问解决方案
说到跨域访问,必须先解释一个名词:同源策略.所谓同源策略就是在浏览器端出于安全考量,向服务端发起请求必须满足:协议相同.Host(ip)相同.端口相同的条件,否则访问将被禁止,该访问也就被称为跨域访问 ...

iframe父子级页面传值支持跨域访问javascript

子页面

以下就是js代码：

iframe父子级页面传值支持跨域访问javascript相关推荐

最新文章

热门文章