iframe嵌套通信

最新推荐文章于 2024-08-14 09:30:44 发布

violectyc

最新推荐文章于 2024-08-14 09:30:44 发布

阅读量669

点赞数 1

文章标签： iframe js

本文链接：https://blog.csdn.net/violectyc/article/details/84839624

版权

1.不考虑跨域情况，跨域时用postMessage，监听父子页面即可。

2.不跨域的情况下通过ifrmae嵌套子页面。

模拟一个在父页面获取子页面的高度避免出现子页面显示不完整。

父页面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div style="height: 255px;background: aliceblue;" id="div2">index</div>
<div style="width: 1212px;margin: auto;">
    <iframe name="myF" src="./child.html" frameborder="0" scrolling="no" width="100%" id="news" scroll="auto"></iframe>
</div>
<div style="height: 385px;background: aliceblue;" id="div"></div>
<script>
    // 获取iframe对象
    let news = document.querySelector('#news');

    document.querySelector('#div2').addEventListener('click',  function () {
        // 调用子页面的方方法
        let x =  myF.window.c_say();
        if (x) {
            news.height = x;
        }
    }, false);

    // 定义父页面的方法
    function say(h) {
        if (typeof h === 'number') {
            news.height = h;
            console.log(h);
        }
        console.log('parent page');
    }
</script>
</body>
</html>

子页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Title</title>
</head>
<body style="height: 2000px;background: black;">
<div style="height: 200px;background: yellow" id="div">child</div>
<div style="height: 1000px;background: beige">child</div>

<script>
    document.querySelector('#div').addEventListener('click', function () {
        let h = document.documentElement.scrollHeight || document.body.scrollHeight;
        // 调用父页面的方法
        parent.window.say(h);
    }, false);

    // 定义子页面的方法
    function c_say() {
        let h = document.documentElement.scrollHeight || document.body.scrollHeight;
        console.log('child_page');
        return h;
    }

</script>
</body>
</html>

点击父页面的div，即可设置iframe的正确高度。

其实就是在父页面通过iframe的name.window.子页面方法调子页面方法

在子页面通过parent.window.父页面方法即可。

在ie上不支持包括最新的ie11