同域下，iframe父窗口和子窗口的js通讯

同域下，iframe父页面和子页面的js通讯

1. 概念：同域与跨域

  • 同域：协议相同、域名相同、端口相同，缺一不可
    • 父页面和子页面，上述三个相同，即同域。
  • 跨域：协议、域名、端口至少一个不同，就是跨域
    • 跨域问题是浏览器的同源策略造成的，是浏览器对javascript的安全限制
    • 跨域问题只存在于浏览器端，不存在于服务器端

2.介绍：iframe标签

  • 作用：可以在你的页面中，轻松嵌入其他页面
  • 常用属性：
    • 1.frameborder
      • 含义：是否显示边框
      • 选项：1和0、1表示yes，0表示no
    • 2.height
      • 高度属性，设置高度，建议在css中设置
    • 3.width
      • 宽度属性，设置宽度，建议在css中设置
    • 4.name
      • 设置名称，设置后，可以在window.frames[]数组中找到这个框架
    • 5.scrolling
      • 是否滚动
      • 选项：yes、no、auto
    • 6.src
      • 规定在 iframe 中显示的文档的 URL。
    • 7.sandbox
      • 启用一系列对 iframe中内容的额外限制。
  • 获取iframe中的内容
    • iframe主要的两个API是 contentWindow和contentDocument
    • iframe.contentWindow,
      • 作用：获取iframe的window对象
    • iframe.contentDocument
      • 作用： 获取iframe的document对象

3.自适应iframe

  • 第一步：去掉滚动条

    • 在标签中写上属性，scrolling="no"

  • 第二步：将iframe的高设置body的高

    var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

  • 第三步：其他可选的装饰属性

    • allowtransparency
      • 作用：是否允许iframe设置为透明，默认是false
      • 选项：true和false
    • allowfullscreen
      • 作用：是否允许iframe全屏，默认为false
      • 选项：true和false
      • 备注：在iframe中嵌入视频时，设为true，视频可以全屏

4.防止自己的网站被其他人恶意嵌套

    // 防止恶意嵌套
    // 如果存在父页面，则跳转到百度
    if(window != window.top){
        top.location.href = "http://www.baidu.com";
    }
    // 如果父页面的域名和端口号 不等于 子页面的域名和端口号，则跳转到子页面
    if (top.location.host != window.location.host) {
　　    top.location.href = window.location.href;
    }

5.父子页面的JS通讯

父页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父页面</title>
</head>
<body>
    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()" />
    <iframe id="myFrame" name="myFrame" src="child.html"></iframe>
</body>
<script type="text/javascript">
    function say() {
        alert("i am parent.html");
    }

    function callChild() {
        // 父窗口 操作 子窗口
        // 1.方法一：通过iframe的id获取页面dom，并通过内置属性contentWindow获取子窗口的window对象
        var childWindow = document.getElementById("myFrame").contentWindow; // 获取子窗口的window

        // 2.方法二：通过iframe的name属性，直接获取子窗口的window对象
        var childWindow = myFrame.window;

        // 3.方法三：通过父窗口window对象的frames[]数组，直接获取子窗口的window对象
        var childWindow = window.frames[0];

        childWindow.say() // 调用子窗口的say方法
        childWindow.document.getElementById("button").value = "调用结束";
    }
</script>
</html>

子页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子页面</title>
</head>
<body>
    <input id="button" type="button" value="调用parent.html中的函数say()" onclick="callParent()" />
</body>
<script type="text/javascript">
    function say() {
        alert("i am child.html");
    }

    function callParent() {
        // 子窗口 操作 父窗口
        // 1. 方法一：通过parent对象
        // var parentWindow = parent.window;
        // 2. 方法二：通过top对象
        var parentWindow = top.window;

        parentWindow.say();
        parentWindow.document.getElementById("button").value = "调用结束";
    }
</script>
</html>

建议：复制粘贴到自己本地去跑一下代码，理解一下父子页面的通讯，再去解决自己的需求

posted @ 2021-10-18 11:44  笔下洛璃  阅读(315)  评论(0)  编辑  收藏  举报