JS跨域常见方案(1)

http://x.y.com/xx.js 文件内容：

getWeather({

“城市”: “北京”,

“天气”: “大雾”

});

我们可以看到，在我们定义了 getWeather(data) 这个函数后，直接载入了 xx.js。

在这个脚本中，执行了 getWeather 函数，并传入了一个对象。然后我们在这个函数中将这个对象输出到 console 中。

这就是整个 JSONP 的流程。

2. document.domain

---

使用条件：

1. 有其他页面 window 对象的引用。

2. 二级域名相同。

3. 协议相同。

4. 端口相同。

document.domain 默认的值是整个域名，所以即使两个域名的二级域名一样，那么他们的 document.domain 也不一样。

使用方法就是将符合上述条件页面的 document.domain 设置为同样的二级域名。这样我们就可以使用其他页面的 window对象引用做我们想做的任何事情了。(╯▔▽▔)╯

补充知识：

• x.one.example.com 和 y.one.example.com 可以将 document.domain 设置为 one.example.com，也可以设置为 example.com。

• document.domain 只能设置为当前域名的一个后缀，并且包括二级域名或以上（.edu.cn 这种整个算顶级域名）。

我们直接操刀演示，用两个网站 http://wenku.baidu.com/ 和 http://zhidao.baidu.com/。

这两个网站都是 http 协议，端口都是 80， 且二级域名都是 baidu.com。

打开 http://wenku.baidu.com/，在 console 中输入代码：

document.domain = ‘baidu.com’;

var otherWindow = window.open(‘http://zhidao.baidu.com/’);

我们现在已经发现百度知道的网页已经打开了，在百度知道网页的 console 中输入以下代码：

document.domain = ‘baidu.com’;

现在回到百度文库的网页，我们就可以使用百度知道网页的 window 对象来操作百度知道的网页了。例如：

var divs = otherWindow.document.getElementsByTagName(‘div’);

上面这个例子的使用方法并不常见，但是非常详细的说明了这种方法的原理。

这种方法主要用在控制 <iframe> 的情况中。

比如我的页面(http://one.example.com/index.html)中内嵌了一个 <iframe>：

我们在 iframe.html 中使用 JavaScript 将 document.domain 设置好，也就是 example.com。

在 index.html 执行以下脚本：

var iframe = document.getElementById(‘iframe’);

document.domain = ‘example.com’;

iframe.contentDocument; // 框架的 document 对象

iframe.contentWindow; // 框架的 window 对象

这样，我们就可以获得对框架的完全控制权了。

补充知识（绝对干货）：

当两个页面不做任何处理，但是使用了框架或者 window.open() 得到了某个页面的 window 对象的引用，我们可以直接访问的属性有哪些？

| 方法 |

| — |

| window.blur |

| window.close |

| window.focus |

| window.postMessage |

| window.location.replace |

| 属性 | 权限 |

| — | — |

| window.closed | 只读 |

| window.frames | 只读 |

| window.length | 只读 |

| window.location.href | 只写 |

| window.opener | 只读 |

| window.parent | 只读 |

| window.self | 只读 |

| window.top | 只读 |

| window.window | 只读 |

3. window.name

---

我们来看以下一个场景：

随意打开一个页面，输入以下代码：

window.name = “My window’s name”;

location.href = “http://www.qq.com/”;

再检测 window.name :

window.name; // My window’s name

可以看到，如果在一个标签里面跳转网页的话，我们的 window.name 是不会改变的。

基于这个思想，我们可以在某个页面设置好 window.name 的值，然后跳转到另外一个页面。在这个页面中就可以获取到我们刚刚设置的 window.name 了。

由于安全原因，浏览器始终会保持 window.name 是 string 类型。

这个方法也可以应用到与 <iframe> 的交互上来。

我的页面(http://one.example.com/index.html)中内嵌了一个 <iframe>：

在 iframe.html 中设置好了 window.name 为我们要传递的字符串。

我们在 index.html 中写了下面的代码：

var iframe = document.getElementById(‘iframe’);

var data = ‘’;

iframe.onload = function() {

data = iframe.contentWindow.name;

};

定睛一看，为毛线报错？

细心的读者们肯定已经发现了，两个页面完全不同源啊！

由于 window.name 不随着 URL 的跳转而改变，所以我们使用一个暗黑技术来解决这个问题：

var iframe = document.getElementById(‘iframe’);

var data = ‘’;

iframe.onload = function() {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
715548291568)]

[外链图片转存中…(img-BrUyTKtx-1715548291568)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！