cellar-js-sdk/dist/iframe.js

晒啦第三方授权工具

import { CellarEnv } from "./interface/cellar";
export class CellarWindow {
    constructor(appId, env, origin, url) {
        this.hideStyle = 'display: none';
        this.showStyle = '';
        this.isInit = false;
        this.appId = appId;
        let old = document.getElementById('cellar_mask_' + this.getId());
        if (old) {
            document.body.removeChild(old);
        }
        let mask = document.createElement('div');
        mask.id = 'cellar_mask_' + this.getId();
        let container = document.createElement('div');
        container.id = 'cellar_context_' + this.getId();
        let iframe = document.createElement('iframe');
        iframe.id = 'cellar_iframe_' + this.getId();
        let style = document.createElement('style');
        style.innerHTML = this.initStyle();
        this.env = env;
        this.style = style;
        this.mask = mask;
        this.container = container;
        this.iframe = iframe;
        this.origin = origin;
        iframe.setAttribute('src', url);
        iframe.setAttribute('frameborder', '0');
        iframe.setAttribute('scrolling', 'no');
        // document.body.appendChild(style);
        this.hideWindow();
        this.hideIframe();
        container.insertBefore(style, container.firstElementChild);
        container.insertBefore(iframe, container.firstElementChild);
        mask.insertBefore(container, mask.firstElementChild);
        document.body.insertBefore(mask, document.body.firstElementChild);
        window.addEventListener('message', this.messageListener(), false);
    }
    log(...data) {
        if (this.env === CellarEnv.PRE || this.env === CellarEnv.DEV) {
            console.log(data);
        }
    }
    initStyle() {
        return `
            #cellar_iframe_${this.getId()}::-webkit-scrollbar {
                visibility: hidden;
            }
            
            #cellar_mask_${this.getId()} {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(247, 247, 247, 0.8);
                z-index: 99999;
            }
            
            @media(min-width: 751px) {
                #cellar_mask_${this.getId()} #cellar_context_${this.getId()} {
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    width: 375px;
                    height: 667px;
                    margin-top: -334.5px;
                    margin-left: -187.5px;
                }
                
                #cellar_mask_${this.getId()} #cellar_context_${this.getId()} #cellar_iframe_${this.getId()} {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    border-radius: 20px;
                    box-shadow: 0 0 1px 1px #cdcdcd;
                }
            }
            
            @media(max-width: 750px) {
                #cellar_mask_${this.getId()} #cellar_context_${this.getId()} {
                    position: fixed;
                    width: 100%;
                    height: 100%;
                }
                
                #cellar_mask_${this.getId()} #cellar_context_${this.getId()} #cellar_iframe_${this.getId()} {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
            }
        `;
    }
    getId() {
        return this.appId;
    }
    getMask() {
        return this.mask;
    }
    getIframe() {
        return this.iframe;
    }
    getOrigin() {
        return this.origin;
    }
    styleHide(obj) {
        obj.setAttribute('style', this.hideStyle);
    }
    styleShow(obj) {
        obj.setAttribute('style', this.showStyle);
    }
    showWindow(sendData, callback) {
        var _a;
        this.callback = callback;
        if (this.getInitState()) {
            (_a = this.getIframe().contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(sendData.data, sendData.origin);
        }
        this.styleShow(this.getMask());
    }
    showIframe() {
        this.styleShow(this.getIframe());
    }
    hideIframe() {
        this.styleHide(this.getIframe());
    }
    hideWindow() {
        this.callback = undefined;
        this.styleHide(this.getMask());
    }
    initDone() {
        this.isInit = true;
    }
    getInitState() {
        return this.isInit;
    }
    //监听函数
    messageListener() {
        let context = this;
        let origin = context.getOrigin();
        function listener(e) {
            let iframeElement = context.getIframe();
            if (iframeElement) {
                let iframeWindow = iframeElement.contentWindow;
                if (iframeWindow && e.origin === origin && e.data) {
                    let info = {};
                    if (typeof e.data === 'string' && e.data.indexOf('{') === 0 && e.data.lastIndexOf('}') === e.data.length - 1) {
                        info = JSON.parse(e.data);
                    }
                    else if (typeof e.data === "object") {
                        info = e.data;
                    }
                    if (info.method) {
                        if (info.method === 'appInit') {
                            context.initDone();
                        }
                        else if (info.method === 'show') {
                            context.showIframe();
                        }
                        else if (info.method === 'close') {
                            context.hideWindow();
                        }
                        else if (info.method === 'messageBack') {
                            if (info) {
                                context.log('iframe收到消息', info);
                            }
                        }
                        if (context.callback) {
                            context.callback(iframeWindow, info);
                        }
                    }
                }
                else {
                    context.log('messageOrigin', e.origin);
                    context.log('contextOrigin', origin);
                }
            }
        }
        return listener;
    }
}
//# sourceMappingURL=iframe.js.map