2019-11-07 2019-11-07

1.JSONP JSONP是一种数据调用方式，是解决跨域交互的方法。网页通过在script标签里添加元素，向服务器请求数据，这种做法不受同源政策的限制，服务器收到请求后，把数据放在一个指定的回调数中返回。

1.定义出来函数的appendHtml function appendHtml(news){ var html = '' for(var i = 0; i' } console.log(html) $('.news')innerHtml = html } 2.创建script标签，src地址执行后端端口，地址的末尾加个参数callback = appendHtml $(".change").addEventListener("click",function(){ var script=document.createElement("script") script.src='http://localhost:8080/getNews?callback=appendHtml' document.head.appendChild("script") document.head.removeChild("script") }) 3.服务器在收到请求后，解析参数，计算返回数据，输出appendHtml(data)字符串var www = req.query.callback if(www){ res.send(www + '(' +JSON.stringify(data)+')') }else{ res.send(data) } 4.appendHtml(data)会放在script标签里面当做js来执行，同时调用appendHtml()函数。将data作为参数。

2. CORS cross origin resource sharing 跨域资源共享。这是W3C的标准，是跨域请求的根本解决方法。相比JSONP只能发get请求，CORS允许发任何类型的请求。对于开发者来说CORS 通信与同源的ajax通信没有差别，代码完全一样。浏览器一旦发现ajax请求是跨源的，会自动在头部添加origin标签，用户无需单独做操作。
工作流程：

当使用XMLHttpRequest发送请求时，浏览器会检测到不符合同源策略，于是会加一个请求头origin。
后台确认符合策略时，会在返回的数据里添加一个响应头access-control-allow-origin。
浏览器判断该响应头中是否有origin值，如果有则接收数据。如果没有，则直接驳回。我们无法拿到数据。

$('.change').addEventListener('click', function () { var xhr = new XMLHttpRequest() xhr.open('get', 'http://b.jrg.com:8080/getNews', true); xhr.send() xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { appendHtml(JSON.parse(xhr.responseText)) } }; window.xhr = xhr }); 如果有则浏览器会处理响应，我们就可以拿到响应数据， res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080") //res.header("Access-Control-Allow-Origin", "*")

3.降域如果在域名a.jrg.com通过js操作b.jrg.com将会报错：浏览器阻止访问不同源的iframe

通过修改document.domain来跨域操纵页面上的iframe，这样就能达到我们的目标，让他们实现跨域交互
document.domain = "jrg.com"
4.Post Message 降域实现跨域通信时要求两个域属于同一个父级域名。而post message没有这个限制。
一个页面向另一个页面发送postmessage消息，如果接收方愿意接收的话(通过message语句监听)，那么就实现了通信。
主页面a.html向ifame页面b.html加入postMessage信息

$('.main input').addEventListener('input', function(){ console.log(this.value); window.frames[0].postMessage(this.value, '*'); }); $('.main input').value = https://www.it610.com/article/e.data; console.log(e.data); });

【2019-11-07】iframe页面b.html向父页面a.htm加入postmessage信息

$('#input').addEventListener('input', function(){ window.parent.postMessage(this.value, '*'); }); window.addEventListener('message',function(e) { $('#input').value = https://www.it610.com/article/e.data; console.log(e.data); });