zoukankan      html  css  js  c++  java
  • iframe嵌套跨域子页面变化高度自适应

    iframe嵌套子页面

       <iframe width="100%" height="100%" id='test'  title='测试' src='https://www.baidu.com' frameBorder="0" />

    现在的高度是整个屏幕的高度,如果子页面高度大于屏幕高度,内容无法显示,并且没有滚动条,要有滚动条必须给iframe赋值一个确定的高度。但是又由于他是跨域子页面,所以没办法获得子页面的高度,所以可以使用postMessage方法,子页面获取高度传值给父页面,然后变化iframe的高度

    通过监听子页面的postMessage信息,获取信息来改变父页面iframe高度

     window.addEventListener('message', (event) => {
                if (event.origin === nestOrigin) {
                    document.getElementById('test').style.height = `${event.data}px`
                }
            })

    接下来是子页面的操作:

    给子页面的最外层设置一个div包层,设置id

    <div id="child">
    子页面内容
    </div>

    然后通过MutationObserver监听子页面改变,当监听到改变的时候,触发postMessage

    const targetNode = document.getElementById('child')
            const configObserver = { 
                attributes: true, 
                // attributeFilter: ['style'],
                // attributeOldValue: true,
                childList: true,
                subtree: true }
            // 创建一个观察器实例并传入回调函数
            observer = new MutationObserver(() => {
                const target = document.getElementById('child').scrollHeight
                window.parent.postMessage(target, postMessageOrigin) 
    })

    // 以上述配置开始观察目标节点
    observer.observe(targetNode, configObserver)

    这样的话,只要子页面有任何的改变都会触发postMessage传回变化的高度

    最后在页面卸载的时候取消监听

     observer.disconnect()
     
     
    包灵!!!
  • 相关阅读:
    Linux同一机器设置多个IP2019-7-6
    使用Apache服务部署静态网站2019-7-5
    系统状态检测命令2019-7-5
    简单的shell脚本
    常用的系统工作命令2019-7-4
    Lnmp架构部署动态网站环境.2019-7-3-1.4
    Lnmp架构部署动态网站环境.2019-7-3-1.3
    Linux安装ftp服务-详细步骤
    循环删除List集合的元素
    反射-父类获取子类属性并赋值
  • 原文地址:https://www.cnblogs.com/tutuj/p/14627863.html
Copyright © 2011-2022 走看看