iframe+vue修改滚动条样式

iframe修改滚动条样式

因为用iframe来展示第三方网页，所以无法修改里面的滚动条样式，于是想到获取第三方网页的高度，然后赋值给iframe标签，使iframe高度自适应，然后在最外层放一个div，通过设置div的高度和滚动条样式达到类似效果。

<div class="input-box-iframe">
            <iframe :src="result" id="iframe" :height="height" width="1000" scrolling="no" name="demo"  @load="loaded"></iframe>
</div>

监听iframe是否加载完毕

mounted() {  
        const iframe = document.querySelector('#iframe')
        if (iframe.attachEvent) {
            iframe.attachEvent('onload', function () {
            // iframe加载完毕以后执行操作
            console.log('iframe已加载完毕',document.getElementsByTagName('iframe')[0])
         })
        }else {
            iframe.onload = function () {
                setTimeout(()=>{
                    //获取第三方页面的高度
                    console.log('iframe已加载完毕!',document.getElementsByTagName('iframe')[0].ownerDocument.body.clientHeight)
                    this.height = document.getElementsByTagName('iframe')[0].ownerDocument.body.clientHeight + 200
                console.log(document.getElementsByTagName('iframe'));
                },1000)
            }
        }
        },

设置滚动条样式和外层div样式

::-webkit-scrollbar-thumb {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: .375rem;
    background-color: rgba(144,147,153,.3);
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    }
    ::-webkit-scrollbar {
        width: .625rem;
        height: .625rem;
    }
    .input-box-iframe{
        width: 1000px;
        height: 600px;
        overflow-y: scroll;
        overflow-x: hidden;
        margin: 0 auto;
        margin-bottom: 1.25rem; 
    }