跨域

问题：在一个网站上想要接收其他网站发过来的消息

概念

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

http://www.nihao.com/index.html 调用 http://www.nihao.com/server.php （非跨域）http://www.nihao.com/index.html 调用 http://www.nihaoma.com/server.php （主域名不同:nihao/nihaoma，跨域）http://abc.nihao.com/index.html 调用 http://def.nihao.com/server.php （子域名不同:abc/def，跨域）http://www.nihao.com:8080/index.html 调用 http://www.nihao.com:8081/server.php （端口不同:8080/8081，跨域）http://www.nihao.com/index.html 调用 https://www.nihao.com/server.php （协议不同:http/https，跨域）
localhost   调用 127.0.0.1 跨域

跨域：协议、域名、端口其中任意一个不同。
同源：协议、域名、端口均相同，

案列

b页面接受a页面发送过来的信息

//a.html a页面下的代码
var param = {act_name:"comfirmAddr",search_name: $("#search_input").val(),data:selAddList
}
var json = JSON.stringify(param);
console.log(json);
//第二个参数是目标域：http://www.nihao.com/a.html
window.opener.postMessage(json,'*');
window.close();

//b.html b页面下的代码 b页面接受a页面发送过来的信息
HTML:
<el-button onclick="goToB" >打开b.html的页面</el-button>
JavaScript：
function goToB(){var  url = "http://www.ifine.com/b.html"window.open(url, "打开b.html的页面", "height=" + screen.height + ",width=" + screen.width + ",menubar=no,scrollbars=no,resizable=yes,toolbar=no,status=no,left=100,top=100") ;
}
window.addEventListener('message', receieveMessage, false);
function receieveMessage(event)
{try{var param = event.data;var json = window.JSON.parse(param);var act_name = json.act_name;if(act_name == 'comfirmAddr'){vueObject.addrKey = json.search_name;var v_data = json.data;vueObject.addresArr = v_data;}}catch(e){alert("异常名字："+e.name);alert("异常号："+e.number);alert("异常的描述信息："+e.description);alert("异常的错误信息："+e.message);}
}

事件监听

window.addEventListener(type, function, true/false);
type：事件的类型（如“click”或“mousedown”或“message”或“resize”）。
function：事件触发后调用的函数。
true/false：true：先捕获、false：先冒泡

移除监听事件

window.removeEventListener(“click”, function);

跨域window.opener相关推荐

window.opener方法的使用 js跨域
2019独角兽企业重金招聘Python工程师标准>>> 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.op ...
DOM跨域的三种解决方案：document.domain、window.name、window.postMessage
文章目录同域访问 document.domain 相同二级域名之间的跨域相同域名,不同端口之间的跨域 window.name window.postMessage 同域访问浏览本篇文章之前,需要 ...
JS中的跨域问题及解决办法汇总
一.什么是跨域? 在了解跨域之前,首先要知道什么是同源策略(same-origin policy).简单来讲同源策略就是浏览器为了保证用户信息的安全,防止恶意的网站窃取数据,禁止不同域之间的JS进行交 ...
iframe子页面ajax报错,iframe跨域踩坑
前言工做中,有些系统是利用的iframe.有一次忽然遇到了一个使人费解的跨域报错,没有发请求,却报了"Error:Blocked a frame with origin...from ac ...
跨域？拒绝说概念(内含demo)
文章列出解决方案以及对应的demo,拒绝说概念,不在稀里糊涂. 什么情况出现跨域? 协议不同域名不同端口不同跨域解决方案 1.同一个主域下不同子域之间的跨域请求 - document.domai ...
「跨域」利用node.js实践前端各种跨域方式（上）
前言常言道,"读万卷书,不如行万里路".技术的学习也是如此,唯有实践才能更清楚的明白原理和加深印象,因此本文会利用node.js对前端的各种跨域方式进行实践,强烈建议一步一步跟着 ...
jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
前端常见跨域问题解决方案
前端常见跨域解决方案(全) 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: & ...
js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

跨域window.opener

跨域

概念

案列

事件监听

移除监听事件

跨域window.opener相关推荐

最新文章

热门文章