大家好，又见面了，我是你们的朋友全栈君。
iframe是html标签，具有一般标签的属性：
width iframe的高度
height iframe的宽度
src iframe里面加载的页面url
name 可以通过window.frames[name]获取到frame
scrolling iframe里面的页面是否可以滚动
frameborder 是否显示iframe边框 1（显示）0（不显示）
id 和其他的html标签id一样
在主页面中通过iframe标签可以引入其他子页面
<!--localhost:8080/index-->
<iframe id='name' name='child' src="http://locahost:8080/child" frameborder="0" width='200px' height='300px' ></iframe>
<script>
console.log(window.frames['child']);//获取到子页面的window对象
</script>
1、获取iframe内部元素
var frame=ducument.frames[‘name’]
|| document.getElementById();
常用属性contentWindow、contentDocument
frame.contentWindow 获取子页面的window对象
frame.contentDocument 获取子页面的document对象
2、获取父页面
子页面可以访问、修改同一个域名的父页面的方法和属性
window.parent/parent 获取当前页面的父页面-iframe所在的页面
parent.window 获取父页面的window属性
parent.document 获取父页面的document属性
window.top 获取打开该页面的父页面，如果当前页面没有被嵌套到iframe中，window.topwindow
window.self=window
安全问题-禁止iframe嵌套网页
//当页面被非同域名iframe嵌套时：嵌套页面网址改变成本页面网址
if (window.top != window) {
if (window.top.location.hostname && top.location.hostname !== window.hostname) {
window.top.location.href = window.location.href;
}
}
frame跨域调用
使用postMessage
父页面
<!DOCTYPE html>
<html lang="en">
<body>
<!-- qsstage.morningstar.com.com/parent.html -->
<iframe id="ifr" src="http://test.com/child.html"> </iframe>
</body>
<script>
window.onload = function () {
var ifr = document.querySelector('#ifr');
ifr.contentWindow.postMessage({ a: 1 }, '*');
}
window.addEventListener('message', function (e) {
console.log('child say: ' + e.data);
}, false);
</script>
</html>
子页面
<!DOCTYPE html>
<html lang="en">
<body>
<script>
window.addEventListener('message', function (e) {
console.log('parent say: ' + e.data.a);
e.source.postMessage('get', '*');
}, false)
</script>
</body>
</html>
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/127708.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
