跨域 二

1.document.domain跨域

场景:http://a.xxx.com/A.htm 的主页面有一个<iframe src="http://b.xxx.com/B.htm"></iframe>,两个页面的js如何进行交互?

这种跨子域的交互,最简单方式就是通过设置document.domain。

只需要在A.htm与B.htm里都加上这一句document.domain = ‘xxx.com‘,两个页面就有了互信的基础,而能无碍的交互。

实现方式简单,并且主流浏览器都支持IE6+、Firefox、Chrome等.

适用:同一个主域名下,不同子域之间的交互。

用法:a页面

b页面

2.使用window.name

window对象有个name属性,即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,

每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

用法:a页面

<script>
    function setwindowname()
    {
        window.name=‘a页面设置的‘;
        window.location.href="http://172.16.103.22/kuayu/6window.name.html";
    }
</script>
<body>

    <button onclick="setwindowname()">
        click window.name
    </button>
</body>

b页面

<script>
    alert(window.name);
</script>
<body>
</body>

这样a页面设置的值传入到了b页面。

3. html5  window.postMessage

window.postMessage(message,targetOrigin)  方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window

对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;

第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 *  。

需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。

用法:a页面

<body>
    <div style="width:300px;height:200px;">
        <iframe id="proxy" src="http://172.16.103.22/kuayu/5postMessage.html" style="display: block"></iframe>
    </div>
    <button onclick="postMsg()"> click</button>
    <script type="text/javascript">
        var obj = {
            msg: ‘this is come page  a ‘
        }
        function postMsg() {
            var iframe = document.getElementById(‘proxy‘);
            var win = iframe.contentWindow;
            win.postMessage(obj, ‘http://172.16.103.22‘);
        }
    </script>
</body>

b页面:

  <script type="text/javascript">
        window.addEventListener(‘message‘, function (event) {
            console.log(‘received response:  ‘, event.data);
            var ps = document.getElementById(‘pid‘);
            ps.textContent = event.data.msg;
            console.log(ps);
        }, false);
</script>

b页面可以接收到a页面的消息。

此外还有通过 flash 、服务器是指代理、img等方法实现。

时间: 2024-10-14 14:09:46

跨域 二的相关文章

Nginx 解决WebApi跨域二次请求以及Vue单页面问题

https://www.cnblogs.com/jianxuanbing/p/8252252.html https://www.cnblogs.com/qcloud1001/p/8252627.html https://www.cnblogs.com/dotnet-arch-system/p/8035248.html http://www.cnblogs.com/dotnet-arch-system/p/8232879.html 原文地址:https://www.cnblogs.com/maom

rest_framework 跨域和CORS

本节目录 一 跨域 二 CORS 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当

spring boot跨域请求访问配置以及spring security中配置失效的原理解析

一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[origin]就是协议.域名和端口号.例如:http://www.baidu.com:80这个URL. 什么是同源 若地址里面的协议.域名和端口号均相同则属于同源. 是否是同源的判断 例如判断下面的URL是否与 http://www.a.com/test/index.html 同源 http://www.a

jsonp跨域实例

一.什么是跨域 二.如何解决跨域 1.前端常用 JSONP 2.服务器端配置 HTTP 协议的 header 解析 三.JSONP实现的实例 <!DOCTYPE html> <html> <head> <title>jsonp跨域test</title> </head> <body> <script type="text/javascript"> function res (r) { //定

SpringBoot配置Cors跨域请求

一.同源策略简介 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[origin]就是协议.域名和端口号.例如:http://www.baidu.com:80这个URL. 什么是同源 若地址里面的协议.域名和端口号均相同则属于同源. 是否是同源的判断 例如判断下面的URL是否与 http://www.a.com/test/index.html 同源 http://www

跨域和CORS

目录 跨域和CORS 一 跨域 二 CORS 跨域和CORS 本节目录 一 跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开

php分享二十五:跨域请求

问题: 跨域请求有几种方式? jsonp支持哪几种请求方式? 支持post请求吗? 支持get请求吗? 由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域.具体可以查看下表: 方法一:JSONP 这种方式主要是通过动态插入一个script标签.浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下). <script> var _script = document.createElement("scr

跨域解决方案二:使用JSONP实现跨域

跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家分享. JSONP跨域原理探秘 我们知道,使用 XMLHTTPRequest 对象发送HTTP请求时,会遇到 同源策略 问题,域不同请求会被浏览器拦截. 那么是否有方法能绕过 XMLHTTPRequest 对象进行HTTP跨域请求呢? 换句话说,不使用 XMLHTTPRequest 对象是否可以发送

二、如何实现AJAX跨域

为何有跨域问题: ajax之所以需要“跨域”,罪魁祸首就是浏览器的同源策略.即,一个页面的ajax只能获取这个页面相同源或者相同域的数据. 如何叫“同源”或者“同域”呢?——协议.域名.端口号都必须相同.例如: http://google.com 和 https://google.com 不同,因为协议不同: http://localhost:8080 和 http://localhost:1000 不同,因为端口不同: http://localhost:8080 和 https://googl