关于iframe的同源策略问题
在当前页面下的iframe的域名若与当前页面的域名不同源，则当前页面的js代码对iframe无法进行任何操作。
这是为了保护用户在iframe中登录其他网站或与之类似的相关操作会泄露隐私数据。
什么是降域
如http://a.justfun.me 和 http://b.justfun.me，后面的justfun.me相同，那么就可以使用document.domain将二者的域名设置为justfun.me，来实现同源
注意事项
- 顶级域名无法降域
- 不仅当前页面要使用document.domain，iframe的源页面也要使用document.domain
与JSONP、CORS相比
- 降域主要针对于当前页面下的iframe
实现代码
注意修改host文件使得不同域名映射至同一个IP地址，即可测试JSONP跨域
主页面代码
<!doctype html>
<html lang="ch">
<head>
<meta charset="utf-8">
<title>使用降域</title>
<style>
.container {
display: flex;
}
.container .main, iframe {
border: 1px solid;
height: 300px;
width: 30%;
}
.main input {
width: 300px;
}
</style>
</head>
<body>
<h1>降域</h1>
<div class="container">
<div class="main">
<input type="text">
</div>
<iframe src="http://b.justfun.me:8080/iframe.html" frameborder="0"></iframe>
</div>
<script>
var inputNode = document.querySelector('.container .main input')
inputNode.setAttribute('placeholder', '我是当前网页，我的域名是' + location.origin)
// console.log(window.frames[0].document.body) // 执行这行代码会报错，因为当前网页获取不到任何有关iframe的信息
document.domain = 'justfun.me'
// 注意：顶级域名无法进行降域
</script>
</body>
</html>
iframe页面代码
<!doctype html>
<html lang="ch">
<head>
<meta charset="utf-8">
<title>使用降域</title>
<style>
.main input {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<input type="text">
</div>
</div>
<script>
var inputNode = document.querySelector('.container .main input')
inputNode.setAttribute('placeholder', '我是iframe，我的域名是' + location.origin)
document.domain = 'justfun.me'
</script>
</body>
</html>
网友评论