降域
2018-03-20 本文已影响0人
取个名字都不行
1.什么是降域
利用document.domain进行降域
例如http://a.justfun.me和http://b.justfun.me，后面的justfun.me相同，那么就可以使用document.domain将二者的域名设置为justfun.me，来实现同源
2.降域注意事项
- 顶级域名无法降域
- 不仅当前页面要使用document.domain，iframe的源页面也要使用document.domain
- 降域主要针对于当前页面下的iframe
代码实例
主页面代码
<!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>
