iframe关闭父页面(iframe嵌套https页面)

全栈程序员-用户IM • 2022年4月10日下午2:40 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

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账号...