想要获取子窗口的变量,
必须满足同源条件.
父级 test.html
1
2
3
4
5
6
7
8
9
10
<iframe src="son.html" width="" name="son" height=""></iframe>
<script type="text/javascript">
var ifr = document.getElementsByTagName("iframe")[0];
// 父级拿到子级的变量.
ifr.onload = function () {// 因为iframe 异步加载,所以要等到onload 才能获取数据.
console.log(window.frames["son"].a);
console.log(ifr.contentWindow.a);
}
</script>
子级 son.html
1
2
3
4
5
6
7
8
<body>
demo
<script type="text/javascript">
var a = 123;
// 子级拿到父级的变量
console.log(window.parent.ifr);
</script>
</body>
iframe 跨域
- src里添加哈希值 子级通过 location.hash 取值. 父传子. test.html ```
1
son.html
1
2
3
4
5
6
7
8
9
10
11
12
13
2.window.name
完成 子传父
window.name 是可以跨域的.
同一个窗口的不同源的网页,都共享一个 window.name
都可以操作window.name
我们设置一个中间页面, uncle
test 和 uncle 是 父子,且同源, 可以通过 contentWindow 完成子传父
uncle 和 son 不是同源, 但同一个iframe 共享同一个 window.name
可以完成 互相之间的值传递.
所以test 就能通过 uncle 来获取 son给他的数据.
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
<iframe src="son.html" width="" name="son" height=""></iframe>
<script type="text/javascript">
var ifr = document.getElementsByTagName("iframe")[0];
var flag = true;// 这是为了只执行一次.// 否则会无休止的刷新.因为 ifr.src 会一直触发 onload
ifr.onload = function () {
if (flag) {
flag = false;
ifr.src = "./uncle.html";
} else{
// 如果这里 flag = true 就变成了 类似 toggle 的功能.
console.log(ifr.contentWindow.name);
}
}
// 假设我们希望, 获取完值后,页面返回到 son
function cb (data) {
console.log(data);
}
function getName (ifr, callback) {
var src = ifr.src;
ifr.src = "./uncle.html";
var flag = true;
ifr.onload = function () {
if (flag) {
flag = false;
callback(ifr.contentWindow.name);
ifr.src = src;
}
}
}
getName(ifr, cb);
</script>
</body> ``` uncle.html 这个什么都可以没有 son.html ```
1
2
3
4
5
6
7
8
9
10
11
这个过程完成了子传父.
无论是 用哈希值方式, 还是 window.name 的方式
都必须有传值的情况下,才能获取值.
不能在没传的情况下获取值.
> 第三种方法, 实现子传父 利用 postMe
son.js
1
2
3
4
window.parent.postMessage(obj,"http://localhost/"); // 第二个参数很重要, 写父级的域名,表示能访问? ``` father.js ```
window.onmessage = function (e) {
console.log(e.data);// 这里能够获取到 obj
} ``` >
