1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 316

iframe是html标签，具有一般标签的属性：widthiframe的高度heightiframe的宽度srciframe里面加载的页面urlname可以通过window.frames[name]获取到frameid和其他的html标签id一样在主页面中通过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="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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/127708.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号