1.document.frames()与document.frames[]的区别

<html>

<body>

<iframe id="ifr_1" name="ifr_1">

</iframe>

</body>

</html>

js:

alert(document.frames("ifr_1"));//火狐,谷歌,ie都无法识别这个方法

alert(document.frames["ifr_1"]);//可以得到一个window对象

2.document.frames与window.frames在不同浏览器中的使用

上面的例子中，document.frames["ifr_1"]只有在ie中可以识别，

document.frames 只有 IE Opera 支持。等同于 window.frames。用来取得当前页面内 window 对象的集合。

在 Firefox Chorome Safari 中使用 document.frames 不能获取到 FRAME 元素

alert(window.frames["ifr_1"]);//可以在ie，火狐，谷歌，360中输出window对象

3.document.domain+iframe的设置

3.1 什么是跨域

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js		 同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js		 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js		 同一域名，不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js		 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js		 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js		 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js		 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js		 不同域名 不允许

特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

接下来简单地总结一下在“前台”一般处理跨域的办法，后台proxy这种方案牵涉到后台配置，这里就不阐述了，有兴趣的可以看看yahoo的这篇文章：《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls》

3.2 document.domain+iframe的设置

对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地！代码如下：

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';

这种方式适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信。

备注：某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如www.a.com其实是二级域名。 domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com。

问题：　 1、安全性，当一个站点（b.a.com）被攻击后，另一个站点（c.a.com）会引起安全漏洞。

　　　　2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。

3.3 动态创建script

虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。具体的做法可以参考YUI的Get Utility

这里判断script节点加载完毕还是蛮有意思的：ie只能通过script的readystatechange属性，其它浏览器是script的load事件。以下是部分判断script加载完毕的方法。

js.onload = js.onreadystatechange = function() {

    if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {

        // callback在此处执行

        js.onload = js.onreadystatechange = null;

    }

};

<script>

function include_js(file) {

    var _doc = document.getElementsByTagName('head')[0];

    var js = document.createElement('script');

    js.setAttribute('type', 'text/javascript');

    js.setAttribute('src', file);

    _doc.appendChild(js);

    if (!/*@cc_on!@*/0) { //if not IE

        //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload

        js.onload = function () {

            alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');

        }

    } else {

        //IE6、IE7 support js.onreadystatechange

        js.onreadystatechange = function () {

            if (js.readyState == 'loaded' || js.readyState == 'complete') {

                alert('IE6、IE7 support js.onreadystatechange');

            }

        }

    }

    return false;

}

include_js('http://www.planabc.net/wp-includes/js/jquery/jquery.js');

</script>

　　

详细请参考：http://www.jb51.net/article/47394.htm

3.4 利用iframe和location.hash

这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url： http://a.com#helloword中的‘#helloworld’就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息，cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面，这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据（由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe；Firefox可以修改）。同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一点有变化则获取获取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);

    }

}

a.com下的域名cs3.html

//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值

parent.parent.location.hash = self.location.hash.substring(1);

当然这样做也存在很多缺点，诸如数据直接暴露在了url中，数据容量和类型都有限等……

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

文章较长列在此处不便于阅读，详细请看 window.name实现的跨域数据传输。

3.6 使用HTML5 postMessage

HTML5中最酷的新功能之一就是 跨文档消息传输Cross Document Messaging。下一代浏览器都将支持这个功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能，用postMessage支持基于web的实时消息传递。

otherWindow.postMessage(message, targetOrigin);otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message: 所要发送的数据，string类型。
targetOrigin: 用于限制otherWindow，“*”表示不作限制
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>

参考文章：《精通HTML5编程》第五章——跨文档消息机制、https://developer.mozilla.org/en/dom/window.postmessage

3.6 利用flash

这是从YUI3的IO组件中看到的办法，具体可见http://developer.yahoo.com/yui/3/io/。
可以看在Adobe Developer Connection看到更多的跨域代理文件规范：ross-Domain Policy File Specifications、HTTP Headers Blacklist。

本文大部分转自:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

frames的对象兼容性获取以及跨域实现数据交换（js文件的加载判断）的更多相关文章

  1. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

  2. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  3. 使用jQuery-AJAX–读取获得跨域JSONP数据的示例

    在项目开发中,如果在同一个域名下就不存在跨域情况,使用$.getJSON()即可实现.但是需要跨域请求其他域名下面的Json数据就需要JSONP的方式去请求,跨域写法和getJSON有差异.如下:   ...

  4. jquery跨域请求数据

    jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...

  5. 设置IE浏览器跨域访问数据

    在开发中,经常会遇到多站点跨域访问后台服务获取数据的情况,解决方法有两种 自己写代理服务,访问代理服务,代理服务请求服务获取数据再返回: 设置浏览器可以跨域访问数据. 本文来讲如何设置IE浏览器跨域访 ...

  6. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  7. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  8. JavaScript跨域提交数据

    1.通过jsonp跨域    场景:假设前台有JS方法"crossJS", 1.1发送请求http://www.xxx.com/?callback=crossJS.(创建一个scr ...

  9. 使用JSONP跨域请求数据

    下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.

随机推荐

  1. getTextContent()方法会出现The method getTextContent() is undefined for the type Node 提示

    eclipse 中 如果加入了 其他了xfire 等其他xml解析包的话,使用org.w3c.dom.Node下的getTextContent()方法会出现The method getTextCont ...

  2. leetcode 反转字符串

    请编写一个函数,其功能是将输入的字符串反转过来. 示例: 输入:s = "hello" 返回:"olleh" /** * @param {string} s * ...

  3. IIS7 配置ssl证书 多域名绑定443端口

    IIS7下多个子域名同时配置https协议,但IIS7默认支持单个443端口造成端口冲突: 解决方案:先把每个域名配置不同的端口 例:444,445,446等 然后在:C:\Windows\syste ...

  4. linux命令之系统管理命令（下）

    1.chkconfig:管理开机服务 该命令为linux系统中的系统服务管理工具,可以查询和更新不同的运行等级下系统服务的启动状态. 选项 说明 --list(常用) 显示不同运行级别下服务的启动状态 ...

  5. 获取请求 header 中指定字段的值

    private function getHeader($name) {//获取请求头中$name的值 $name = 'HTTP_' . $name; foreach ($_SERVER as $ke ...

  6. Jmeter后置处理器之JSON Extractor

    一.使用场景 json extractor后置处理器用在返回格式为json的HTTP请求中,用来获取返回的json中的某个值.并保存成变量供后面的请求进行调用或断言等. 二.使用方法 步骤一:选择HT ...

  7. dotnet --info

    [root@bogon ~]# dotnet --info.NET Command Line Tools (2.1.4) Product Information: Version: 2.1.4 Com ...

  8. javascript中children,childNodes等节点属性

    1.children与childNodes children: 获取子元素节点,无兼容问题 childnNodes: IE:获取子元素节点 非IE(chrome,Firefox等):获取子节点,包括元 ...

  9. 3、激活层（Activiation Layers）及参数

    caffe激活层(Activiation Layers) 在激活层中,对输入数据进行激活操作(实际上就是一种函数变换),是逐元素进行运算的.从bottom得到一个blob数据输入,运算后,从top输入 ...

  10. 微信朋友圈评论/回复/cell/键盘谈起

    微信朋友圈评论功能的细节考虑及实现       微信朋友圈回复tableview iOS 实现微信朋友圈评论回复功能(一)