同源策略
同源策略:
协议+域名+端口号 三者必须相同,有一个不同就会出现跨域
注意点:
同源策略只针对于浏览器(即客户端),服务端相互之间请求获取数据是不会出现跨域的问题。
跨域解决方法1:服务器中转
跨域解决方法2:iframe + document.domain
注意点:设置的是基础域名
总结:
1. test2域名下的页面想请求,test域名下映射的ip地址的服务器中的数据;这样就违反了同源策略,因此跨域了,会抱错;
2. test域名下同样有testindex.html页面,那么它请求test域名下映射的ip地址的服务器中的数据就不算跨域了;
3. test2域名下的index.html通过iframe引入test域名下的testindex.html,同理这两个页面也是不同域名,也是会抱错的;但是可以同时在两个页面中设置document.doman = 'xxx.com',这样保障了两个页面中的基础域名是一样的,这样test2域名下的index.html通过iframe引入test域名下的testindex.html时,就不抱错了;
4. 在test2域名下的index.html中已经通过过iframe引入test域名下的testindex.html时,获取到iframne元素后,通过iramne.contentWindow就获取到了testindex.html这个页面的window了。就可以在index.html中对testindex.html的window进行操作了;并且在这里可以用testindex的window去请求test域名下映射的ip地址的服务器中的数据
跨域解决方法3:iframe + window.name
总结:
1. 主窗口页面index.html与index2.html是同源,与index3.html是不同源。而index页面中需要获取index3中的数据;
2. 在index页面中创建iframe元素并且给他的src赋值时,就完成了index3页面中数据的请求,此时index3页面所在的窗口的name值就等同index3的数据data;
3. 而主窗口index与子窗口index3是不同源,直接在子窗口打开index3页面肯定抱错,但是如果子窗口打开的页面是index2页面的话,那就不一样了;
4. 想实现3中的现象,就需要设置一个标识符flag,让它控制iframe.onload加载时子窗口打开的页面是index2页面还是index3页面;
5. 当iframe.onload第一次加载时flag是false,就需要走flag为false时的代码location='index2.index'并且flag=true;此时子窗口页面发生了跳转而显示index2页面,那么iframe元素中发生变化,就需要重新加载即调用iframe.onload,而此时flag为true,那么就执行flag为true时的代码,这样就拿到了data;
主窗口页面:
子窗口页面:
第二个参数是主窗口的url地址;