window.open----被拦截问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/oncemore520/article/details/84956414

在做官网和m站的时候，点击按钮，跳转到第三方页面链接，即一个url.。在第三方页面输入完短信验证码之后，回到该页面，点击弹框里边的完成按钮，请求后台，轮询状态。
1.直接用window.open打开url链接，可能会出现被拦截的问题-----------解决的方案
A：
用a标签打开，通过herf的方式，在新页面中打开----_blank,这种是可以，但是目前不太符合我的要求，我不想在用a标签去给它改样式，弄成按钮的形式。。。
B：让用户自主去触发，就是通过用户自主行为的点击，跳转页面，并且利用延迟函数，注意延迟时间不能太短。
pc端的方法：

            //             app.__vue__.$refs.myConfirm.show('将要打开第三方支付平台', { url: res.data.url }, () => {
            //                 dialog.loading.open(this, '请求中，请稍等');
            //                 setTimeout(() => {
            //                     dialog.loading.open(this);
            //                     app.__vue__.$refs.myConfirm.show('操作已经完成?', { btn1: '完成', btn2: '遇到问题' },
            //                         () => {
            //                             window.location.reload();
            //                         }, () => {
            //                             window.location.reload();
            //                         });
            //                 }, 5000);
            //             });

m站的用法

/**
         * 二次确认
         */
        loanConfirm(url) {
            this.d3pConfirm({
                url: url,
                msg: '将要打开第三方支付平台',
                confirm: {
                    msg: '提现操作已经完成?',
                    txt1: '提现遇到问题',
                    txt2: '完成',
                    callback: () => {
                        dialog.loading.open(this, '跳转中');
                        routerPush(this, consts.COMMON.page.transfer.url);
                    }
                }
            });
        },

、、这里的d3pConfirm。。。

import {
    dialog,
    cusTransferPage,
    cusRedirect
} from "@config/mUtils";

const d3pConfirmMixin = {
    methods: {
        /**
         * 跳转至第三方平台确认弹框
         * @param {参数集合} opts 
        {
            url:'',
            msg:'',
            confirm:{
                msg:'',
                txt1:'',
                txt2:'',
                callback:null
            }
        }
         */
        d3pConfirm(opts) {
            console.log(JSON.stringify(opts))
            cusTransferPage(opts.url, () => {
                dialog.confirm(this, {
                    msg: opts.msg,
                    opts: () => {
                        cusRedirect(opts.url);
                        setTimeout(() => {
                            dialog.confirm(this, {
                                msg: opts.confirm.msg,
                                opts: [{
                                    txt: opts.confirm.txt1
                                }, {
                                    txt: opts.confirm.txt2,
                                    color: true,
                                    callback: () => {
                                        opts.confirm.callback && opts.confirm.callback()
                                    }
                                }]
                            });
                        }, 2000);
                    }
                });
            });
        }
    }
}

export {
    d3pConfirmMixin
}

cusTransferPage 、、、这个函数是根据项目中用到的，暂时无用。

cusRedirect…这个函数比较重要，也是利用了form表单提交的方式来阻止window.open被拦截的问题。。。。

/**
 * 
 * @param {*跳转地址} url 
 * @param {*请求方式} method 
 * @param {*请求参数} params 
 * @param {*打开类型} target 
 */
export const cusRedirect = (url, method = 'get', params = null, target = '_blank') => {
    var $form = document.createElement('form');
    $form.method = method;
    $form.action = url;
    $form.target = target;
    let vars = getUrlVars(url);
    params = {
        ...params,
        ...vars
    }
    if (params) {
        for (let key in params) {
            if (params.hasOwnProperty(key)) {
                let $input = document.createElement('input');
                $input.type = 'hidden';
                $input.name = key;
                $input.value = params[key];
                $form.appendChild($input);
            }
        }
    }
    document.body.appendChild($form);
    $form.submit();
}

对了还有mixins函数。
mixins: [d3pConfirmMixin],d3pConfirmMixin是引用的dspconform.js函数。。
mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改
例如
（1）定义一个mixin.js

export const mixinTest1 = {
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('mixinTest1');
        }
    }
};

（2）组件引入

import {mixinTest1} from './../assets/js/mixin';
export default {
    mixins:[mixinTest1],
    name: 'hello',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}

这样就可以直接调用到混入对象中的hello方法