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

全栈程序员站长

发布于 2022-07-25 11:54:55

7K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

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

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>