iframe⽗⼦页⾯相互访问，iframe属性、安全问题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="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’]
|| ElementById();
常⽤属性contentWindow、contentDocument
2、获取⽗页⾯
⼦页⾯可以访问、修改同⼀个域名的⽗页⾯的⽅法和属性
window.parent/parent 获取当前页⾯的⽗页⾯-iframe所在的页⾯
parent.window 获取⽗页⾯的window属性
parent.document 获取⽗页⾯的document属性

window.self=window
安全问题-禁⽌iframe嵌套⽹页
//当页⾯被⾮同域名iframe嵌套时：嵌套页⾯⽹址改变成本页⾯⽹址
if (p != window) {
if (p.location.hostname && top.location.hostname !== window.hostname) {
}
}
frame跨域调⽤
使⽤postMessage
⽗页⾯
<!DOCTYPE html>
<html lang="en">
<body>
<!-- ingstar/parent.html -->
<iframe id="ifr" src="test/child.html"> </iframe> </body>
<script>
iframe嵌套页面加载慢
var ifr = document.querySelector('#ifr');
}
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。