解決瀏覽器攔截彈出窗口問題

問題描述：

　　當使用新窗口彈出頁面時，瀏覽器有時會默認攔截彈出，並不友好。

　　比如使用第三方支付寶api做支付的時候如果瀏覽器攔截支付彈窗，可能會導致用戶不去付款。

解決方案：

　　方案一：瀏覽器攔截的機制就是認為是非用戶觸發的，所以會去攔截，那么我們的思路就是讓他變成用戶觸發的，去避免瀏覽器進行攔截。

　　1、在組件加載時就去請求支付寶三方接口拿到返回的form表單數據

mounted(){ let _params = { orderId:this.order.orderId, amount:this.order.totalPrice, serviceName:this.pkl.serviceChn[this.order.serviceId] } paymentAlipayApi(_params).then(res => { if(res.status === 200){ this.alipayData = res.data } }) }

　　2、然后當點擊立即支付的時候，就觸發form的submit方法，規避瀏覽器攔截機制。

//確認付款
submitPay(){ 　　if(this.paymentMethod === 0){//微信付款
　　　　this.wxData = { 　　　　　　orderId:this.order.orderId, 　　　　　　amount:this.order.totalPrice, 　　　　　　serviceName:this.pkl.serviceChn[this.order.serviceId] 　　　　} 　　　　this.wxShow = true 　　}else if(this.paymentMethod === 1){//支付寶付款
　　　　this.paymentAlipay() 　　} }, //支付寶付款
paymentAlipay(){ 　　document.querySelector('form[name="punchout_form"]').submit() },

　　此種方案的缺點是就算用戶選擇微信付款，也還是去請求的支付寶的三方接口，似乎並不是最好的解決方式。

　　那么看第二種：

　　方案二：我們點擊的時候先打開一個空白的新窗口，這種瀏覽器也會認為是用戶點擊行為而不會攔截。網上很多例子是直接給新窗口的location.href設置為新url，但是在我們這種需要表單form提交的情況下不行。那么我的思路就是獲取新窗口，然后給空白的新窗口innerHTML設置為支付寶返回的表單內容，然后在空白新窗口自身打開新頁面，這樣也可以解決此問題。因為支付寶三方接口返回的form表單默認就是從自身頁面打開的，所以該方法可以規避方案一的問題。

//支付寶付款
paymentAlipay () { let params = { orderId: this.orderInfo.orderId, amount: this.orderInfo.totalPrice, serviceName: '2018嘉年華' + this.ticket.name } const newWin = window.open(); paymentAlipayApi(params).then(res => { if (res.status === 200) { newWin.document.body.innerHTML = res.data this.$nextTick(()=>{ newWin.document.querySelector('form[name="punchout_form"]').submit() }) } }) },