iframe展示第三方页面修改滚动条样式

iframe定义一个内联框架，常用于嵌套另一个网页，并且实现网页间的互联互通。

在非同源中由于安全策略，对一些功能限制较大。

一、iframe属性介绍

属性	描述
allow	允许特定功能的列表，如fullscreen，geolocation等
allowfullscreen	指定是否允许在iframe中使用全屏模式
allowpaymentrequest	指定是否允许在iframe中进行支付请求
allowtransparency	指定iframe是否可以是透明的
class	为iframe定义一个或多个类名
frameborder	指定是否在iframe周围显示边框
height	指定iframe的高度
importance	指定iframe对页面内容的重要性
loading	指定iframe加载时的行为
name	为iframe定义一个名称
referrerpolicy	指定如何发送referer HTTP标头
sandbox	启用iframe的沙盒模式，提高安全性
src	指定要在iframe中显示的文档的URL
srcdoc	在iframe中嵌入HTML代码而不是外部文档
style	定义iframe的CSS样式
title	为iframe定义一个标题
width	指定iframe的宽度

二、同源策略介绍

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器。 它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。 所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 

同源策略限制以下几种行为：

1. Cookie、LocalStorage 和 IndexDB 无法读取；

2. DOM 和 Js对象无法获得;

3.AJAX 请求禁止返回（注意：不是AJAX发起，禁止请求的返回，如此才有了CROS跨域方法）；

三、同源下修改滚动条样式

<iframe class="iframe-view" frameborder="no" border="0" :src="platUrl"></iframe>

.iframe-view{
    &::-webkit-scrollbar {
        /*width: 0;宽度为0隐藏*/
        width: 6px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        height: 50px;
        background: rgba(255,255,255,0.24);
    }
    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        background: rgba(0,0,0,0.24);
    }
}

四、非同源下修改滚动条样式

<div class="iframe-view">
    <iframe id="iframe" :height="height" width="375" scrolling="no" frameborder="no" border="0" :src="platUrl"></iframe>
</div>

mounted() {  
    const iframe = document.querySelector('#iframe')
    if (iframe.attachEvent) {
        iframe.attachEvent('onload', function () {
            this.height = document.getElementsByTagName('iframe')[0].ownerDocument.body.clientHeight
        })
    }else {
        iframe.onload = function () {
            setTimeout(()=>{
                this.height = document.getElementsByTagName('iframe')[0].ownerDocument.body.clientHeight
            },500)
        }
    }
}

.iframe-view{
    overflow: auto;
    width: 375px;
    height: 667px;
    &::-webkit-scrollbar {
        /*width: 0;宽度为0隐藏*/
        width: 6px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        height: 50px;
        background: rgba(255,255,255,0.24);
    }
    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        background: rgba(0,0,0,0.24);
    }
}