父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
<title>Title</title>
</head>
<body>
<iframe src="http://xxxxxxx:3002/iframe.html" frameborder="0"></iframe>
<script>
console.log('window',window)
console.log('parent',parent)
console.log('window===parent',window===parent)
console.log('window===top',window===top)
console.log('window===self',window===self)
</script>
</body>
</html>
被嵌套的子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
<title>Title</title>
</head>
<body>
<div class="cainiao">我是iframe</div>
<script>
console.warn('以下为iframe中打印的信息=========================================')
console.warn('window-iframe',window)
console.warn('self !== top',self !== top)
console.warn('window !== parent',window !== parent)
console.warn('document.referrer',document.referrer)
console.warn('document',document.getElementsByClassName('cainiao'))
// if(self !== top){
//
// top.location='http://xxxxx:3000/install-guid.html'
// }
// console.error('parent-iframe',parent)
console.error('top-iframe',top)
// console.error('top.location-iframe',top.location)
</script>
</body>
</html>
一、父页面运行的结果
image.png
二、子页面运行的结果
image.png
三、得出的结论
1、被嵌套的子页面无法直接获取top、parent对象信息，但可以通过以下方式判断自己是不是被iframe了
console.warn('self !== top',self !== top)
console.warn('window !== parent',window !== parent)
2、被嵌套的子页面无法通过top.location或parent.location获取其父页面的网址，但是可以在父页面中通过top.location=xxxx或parent.location=xxxx进行跳转来控制父页面，不仅如此，子页面可以在父页面中通过 document.referrer获取其父页面的网址
3、父页面无法执行子页面中打印父top、parent对象的语句
网友评论