`
angowang
  • 浏览: 5499 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

解决javascript跨域

 
阅读更多

1、document.domain+iframe

www.a.com上的a.html

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

script.a.com上的b.html

document.domain = 'a.com';

2、动态创建script

js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
        // callback在此处执行
        js.onload = js.onreadystatechange = null;
    }
};

3、利用iframe和location.hash

先是a.com下的文件cs1.html文件:

function startRequest(){
    var ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
    document.body.appendChild(ifr);
}

function checkHash() {
    try {
        var data = location.hash ? location.hash.substring(1) : '';
        if (console.log) {
            console.log('Now the data is '+data);
        }
    } catch(e) {};
}
setInterval(checkHash, 2000);

cnblogs.com域名下的cs2.html:

//模拟一个简单的参数处理操作
switch(location.hash){
    case '#paramdo':
        callBack();
        break;
    case '#paramset':
        //do something……
        break;
}

function callBack(){
    try {
        parent.location.hash = 'somedata';
    } catch (e) {
        // ie、chrome的安全机制无法修改parent.location.hash,
        // 所以要利用一个中间的cnblogs域下的代理iframe
        var ifrproxy = document.createElement('iframe');
        ifrproxy.style.display = 'none';
        ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下
        document.body.appendChild(ifrproxy);
    }
}

4、使用HTML5 postMessage

a.com/index.html中的代码:

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                                        // 若写成'http://c.com'就不会执行postMessage了
    ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

b.com/index.html中的代码:

<script type="text/javascript">
    window.addEventListener('message', function(event){
        // 通过origin属性判断消息来源地址
        if (event.origin == 'http://a.com') {
            alert(event.data);    // 弹出"I was there!"
            alert(event.source);  // 对a.com、index.html中window对象的引用
                                  // 但由于同源策略,这里event.source不可以访问window对象
        }
    }, false);
</script>

a.com下的域名cs3.html

//因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);

5、window.name实现的跨域数据传输

  1. 在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。
    数据页面会把数据附加到这个iframe的window.name上,data.html代码如下:
    <script type="text/javascript">
        window.name = 'I was there!';    // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
                                         // 数据格式可以自定义,如json、字符串
    </script>
  2. 在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。app.html部分代码如下:
    <script type="text/javascript">
        var state = 0, 
        iframe = document.createElement('iframe'),
        loadfn = function() {
            if (state === 1) {
                var data = iframe.contentWindow.name;    // 读取数据
                alert(data);    //弹出'I was there!'
            } else if (state === 0) {
                state = 1;
                iframe.contentWindow.location = "http://a.com/proxy.html";    // 设置的代理文件
            }  
        };
        iframe.src = 'http://b.com/data.html';
        if (iframe.attachEvent) {
            iframe.attachEvent('onload', loadfn);
        } else {
            iframe.onload  = loadfn;
        }
        document.body.appendChild(iframe);
    </script>
  3. 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。
    <script type="text/javascript">
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    </script>

6.利用flash

7.服务器端开跨域头

分享到:
评论

相关推荐

    javascript插件 解决双向跨域问题

    jcrossdomain是一个专门用于解决JavaScript跨域问题的工具,尤其适用于需要双向通信的场景。它通过创建隐藏的IFrame和利用window.postMessage API来实现跨域通信。window.postMessage是HTML5引入的一个API,允许来自...

    Javascript跨域访问解决方案

    JavaScript跨域访问解决方案 在Web开发中,JavaScript的同源策略是浏览器为了保障用户安全而实施的一项重要机制。它限制了脚本只能访问与当前页面具有相同协议(如http或https)、主机名和端口号的资源。然而,在...

    Javascript跨域和Ajax跨域解决方案

    针对JavaScript跨域,有以下几种常见的解决方法: 1. JSONP(JSON with Padding):JSONP是一种绕过同源策略的方法,它利用`&lt;script&gt;`标签可以跨域加载脚本的特性。通过动态创建`&lt;script&gt;`标签,并设置其`src`属性...

    javascript跨域原因以及解决方案分享

    解决JavaScript跨域问题的方法多种多样,主要包括以下几种: 1. JSONP(JSON with Padding):利用`&lt;script&gt;`标签不受同源策略限制的特性,通过动态创建`&lt;script&gt;`标签,并将回调函数名作为参数传递给服务器。...

    arcgis api for javascript跨域处理方案

    总结起来,解决ArcGIS API for JavaScript的跨域问题通常需要在客户端和服务器端采取相应的措施。资源代理是一种安全且灵活的解决方案,特别是在处理敏感数据或需要控制访问权限时。理解并正确实施这些方法对于开发...

    javaScript跨域通信

    JavaScript跨域通信是Web开发中的一个重要概念,它涉及到浏览器的安全策略和Ajax请求的限制。由于浏览器的同源策略,一个域名下的JavaScript无法直接访问或操作不同域名下的资源,这就需要我们采用特定的方法来实现...

    js跨域问题小结

    解决JavaScript跨域问题的方法有多种: 1. JSONP(JSON with Padding):这是一种早期的跨域解决方案,通过动态创建`&lt;script&gt;`标签来引入一个带有回调函数的JavaScript文件。由于浏览器允许不同源的脚本嵌入,JSONP...

    完美解决iframe跨域问题

    本文将深入探讨如何“完美解决iframe跨域问题”,并介绍其底层的`window.name`转换代理实现。 **一、iframe跨域的基本概念** 1. **什么是iframe**:iframe是一种HTML元素,允许在单个网页中嵌入另一个网页。它通过...

    javascript跨域方案总结

    JavaScript跨域方案是Web开发中的一个重要主题,尤其是在构建现代Web应用程序时。由于浏览器的安全策略,JavaScript在不同域名之间默认不允许进行通信,这就是所谓的“同源策略”。然而,开发者经常需要在多个域之间...

    JavaScript 跨域通信方法

    ### JavaScript父子页面跨域通信详解 #### 一、引言 在现代Web开发中,跨域通信是一个常见的问题。由于浏览器的安全策略——同源策略(Same-origin policy)的存在,JavaScript在处理不同源之间的数据交互时会受到...

    JavaScript跨域总结与解决办法

    ### JavaScript跨域总结与解决办法 #### 跨域的基本概念 跨域问题源自于浏览器的安全策略之一——**同源策略**。同源策略是浏览器为了防止恶意网站通过脚本访问其他网站的数据而采取的一种安全措施。它规定了一个...

    js_跨域访问[参照].pdf

    总的来说,解决JavaScript跨域问题通常需要结合客户端和服务器端的技术,根据实际情况选择合适的策略。对于开发过程中遇到跨域问题的场景,理解这些解决方案并灵活运用是非常重要的,以确保不同源之间能够安全、有效...

    javascript跨域调试工具Javascript Debug Toolkit 1.0.2

    JavaScript跨域调试是Web开发中的一个关键环节,因为浏览器的安全策略限制了JavaScript在不同源之间的交互。"Javascript Debug Toolkit 1.0.2"是一款专为解决这一问题而设计的强大工具,它允许开发者在跨域环境中...

    jsonpajax跨域请求

    总结,JSONP和CORS是解决JavaScript跨域问题的两种主要方法,它们各有优缺点,适用于不同的场景。JSONP简单易用,但安全性较低;CORS则更安全,但需要服务器端的配合。在实际开发中,根据项目需求和浏览器兼容性选择...

    ziilaa_uc(JS跨域操作工具:uc v1.0)

    综上所述,ziilaa_uc工具提供了一种解决JavaScript跨域问题的方法。通过阅读说明.htm,开发者可以了解如何配置和使用uc;通过分析和运行demo.html,他们可以学习如何在实际项目中应用这个工具;ziilaa_uc.jar是工具...

    jquery下利用jsonp跨域访问实现方法.docx

    JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术,尤其在jQuery中得到了广泛的应用。由于浏览器的同源策略限制,JavaScript通常无法在不同源之间进行Ajax请求。但JSONP巧妙地利用了HTML中`...

    JavaScript跨域总结

    JavaScript跨域总结 在Web开发中,由于浏览器的...总之,JavaScript跨域是Web开发中的常见问题,掌握各种跨域解决方案有助于提升开发效率和应用性能。在实际应用中,需根据具体需求和安全性考虑选择合适的跨域方式。

    JavaScript解决跨域滚动条

    在本例中,"JavaScript解决跨域滚动条"的问题,指的是当主程序和子程序页面位于不同的源下,导致主程序无法获取子程序页面的尺寸,从而引发双滚动条的显示。 为了解决这个问题,我们可以利用JavaScript中的两种主要...

    深入分析Javascript跨域问题

    JavaScript中的跨域问题源于浏览器实施的同源...总的来说,解决JavaScript跨域问题需要根据具体需求选择合适的方法,既要考虑安全性,也要考虑兼容性和性能。在实际开发中,通常会结合使用多种策略,以达到最佳效果。

Global site tag (gtag.js) - Google Analytics