1.什么是降域
利用document.domain進(jìn)行降域
例如http://a.justfun.me和http://b.justfun.me，后面的justfun.me相同搏屑，那么就可以使用document.domain將二者的域名設(shè)置為justfun.me算谈，來實(shí)現(xiàn)同源
2.降域注意事項(xiàng)
- 頂級(jí)域名無法降域
- 不僅當(dāng)前頁面要使用document.domain糠雨，iframe的源頁面也要使用document.domain
- 降域主要針對(duì)于當(dāng)前頁面下的iframe
代碼實(shí)例
主頁面代碼
<!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', '我是當(dāng)前網(wǎng)頁削葱，我的域名是' + location.origin)
// console.log(window.frames[0].document.body) // 執(zhí)行這行代碼會(huì)報(bào)錯(cuò)奖亚，因?yàn)楫?dāng)前網(wǎng)頁獲取不到任何有關(guān)iframe的信息
document.domain = 'justfun.me'
// 注意：頂級(jí)域名無法進(jìn)行降域
</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>
