首頁(yè) 猿問(wèn) 有關(guān)于新頁(yè)面彈窗的問(wèn)題

有關(guān)于新頁(yè)面彈窗的問(wèn)題

JavaScript Html5

xue5hen 2018-07-20 13:38:34

1、需求????????網(wǎng)站內(nèi)有一個(gè)table做的客戶列表，其中一列有個(gè)“查看詳情”的按鈕，點(diǎn)擊后會(huì)向服務(wù)器發(fā)起一個(gè)請(qǐng)求（參數(shù)為該行客戶的id信息），然后根據(jù)返回值判斷是否打開(kāi)一個(gè)新頁(yè)面（返回true則打開(kāi)新頁(yè)；返回為false則toast提示“無(wú)法查看！”）。????????這個(gè)需求其實(shí)蠻常見(jiàn)，實(shí)現(xiàn)似乎也很簡(jiǎn)單，但還是遇到一些值得一提的情況。2、方案1）方案一：window.openqueryUserViewAuth(params).then((res)?=>?{ ????If?(res.data.isSuccess)?{ ????????Window.open('/newPage') ????}?else?{...} })????????但是當(dāng)點(diǎn)擊按鈕觸發(fā)彈窗時(shí)，被瀏覽器攔截了，項(xiàng)目負(fù)責(zé)人認(rèn)為這個(gè)體驗(yàn)是不好的，所以需要考慮如何解決這個(gè)問(wèn)題。????????在此之前，先提一下瀏覽器攔截彈窗的原因，網(wǎng)上搜了下，說(shuō)是因?yàn)椤癮jax回調(diào)中的上下文已不是用戶行為了，從安全角度出發(fā)，瀏覽器進(jìn)行了攔截”，這意味著“在函數(shù)內(nèi)部新建a標(biāo)簽再去觸發(fā)a標(biāo)簽的click事件”也是不可行的。2）方案二：控制a標(biāo)簽的href跳轉(zhuǎn)????????于是有提議說(shuō)是否可以“直接使用a標(biāo)簽替代table中的按鈕，然后當(dāng)用戶點(diǎn)擊時(shí)根據(jù)ajax的返回結(jié)果去‘阻止/放行’a標(biāo)簽的href行為”。這個(gè)想法聽(tīng)起來(lái)不太能做到，實(shí)際也確實(shí)沒(méi)成功，不過(guò)測(cè)試中有點(diǎn)兒小發(fā)現(xiàn)，雖然目測(cè)沒(méi)什么實(shí)用價(jià)值，但還是忍不住提一嘴：????????①?首先，如果要阻止a標(biāo)簽的href跳轉(zhuǎn)，常見(jiàn)的伎倆如下；<a?href="newPage.html"?onclick="return?false;">測(cè)試</a>????????②?但這顯然不滿足此次的需求，得讓返回值是可控的，所以嘗試變形；<a?href="newPage.html"?onmousedown="this.x=fn();"?onclick="return?this.x;">測(cè)試</a> <script> ????function?fn()?{return?false} </script>? ? ? ? ③?上述②的變形是可以的，但那代碼都是同步的，所以→再變；<a?href="newPage.html"?onmousedown="this.x=fn();"?onclick="return?this.x;">測(cè)試</a> <script> ????function?fn()?{ ????????setTimeout(function(){return?false},0) ????} </script>? ? ? ?OK，到這里KO了，見(jiàn)證奇跡的時(shí)刻并未降臨。3）方案三：????????苦思無(wú)望，只好再到搜索引擎上找找思路，（其實(shí)就是解釋彈窗為什么被攔截的那帖子），提到了一個(gè)思路“在click事件中先打開(kāi)一個(gè)空白的新窗口，然后再進(jìn)行ajax請(qǐng)求，請(qǐng)求后再去更改新窗口的url”。這方法不錯(cuò)，但可惜并不適用于此次的項(xiàng)目需求，畢竟如果請(qǐng)求發(fā)現(xiàn)res.data.isSuccess為false（即不應(yīng)該打開(kāi)新頁(yè)面），“這時(shí)再用close去關(guān)”并不是一個(gè)好的用戶體驗(yàn)，何況如果請(qǐng)求返回過(guò)慢，那個(gè)新窗口會(huì)以空白之身杵在那里很久，也不好。4）結(jié)束????????后來(lái)，項(xiàng)目負(fù)責(zé)人提出暫通過(guò)后端來(lái)解決，方案如下：前端直接用a標(biāo)簽做按鈕，在href上拼接上get請(qǐng)求的地址（即上述的ajax請(qǐng)求），當(dāng)用戶點(diǎn)擊時(shí)觸發(fā)請(qǐng)求，然后再由后端做302重定向。3、求助????????各位如果有什么好對(duì)策，希望能點(diǎn)撥一下。

查看完整描述

1 回答

已采納

慕勒0069038

TA貢獻(xiàn)143條經(jīng)驗(yàn) 獲得超39個(gè)贊

很抱歉這幾天都沒(méi)有回復(fù)，趕項(xiàng)目= = ，今天抽空看了一眼，給你寫(xiě)了一個(gè) 你試試

<!DOCTYPE?html>
<html?lang="en">
<head>
??<meta?charset="UTF-8">
??<title>Title</title>
??<script?src="jquery/js/jquery.min.js"></script>
??<script>
?????$(document).ready(function?(e)?{

????????$('span').bind('click',function(e,canjump){
???????????console.log(1);
??????????if(!canjump){
?????????????e.preventDefault();
?????????????$('span').trigger("myclick");
?????????????}
????????});
????????$('span').bind('myclick',function(e){
???????????async?function?a()?{
??????????????try{
?????????????????return?await?new?Promise((resolve,?reject)?=>?{
????????????????????setTimeout(function?()?{
???????????????????????resolve(true);
????????????????????},?1000);
?????????????????});
??????????????}catch?(e){
?????????????????return?await?Promise.reject(false);
??????????????}
???????????}
???????????a().then(function?(canjump)?{
??????????????console.log(13);
??????????????$('span').trigger("click",[true]);
???????????}).catch(function?(err)?{
??????????????console.log(err);
???????????})
????????});
?????});
??</script>
</head>
<body>
??<a?href="test1.html"?><span>測(cè)試</span></a>
</body>
</html>

1 反對(duì) 回復(fù) 2018-07-24

xue5hen
謝謝~~

回復(fù) 2018-07-25

慕勒0069038

TA貢獻(xiàn)143條經(jīng)驗(yàn) 獲得超39個(gè)贊

方案2? 的可以參考下 es6(es7) 的 async、await?

?方案2 你的不成功的原因是應(yīng)該是fn() 內(nèi)部的setTimeout 相當(dāng)于異步方法，調(diào)用fn的時(shí)候沒(méi)有return false 出來(lái),

其實(shí)有個(gè)方法，就是成功后彈個(gè)確認(rèn)框（layer就行），里面說(shuō) 即將前往新的頁(yè)面，給一個(gè)確定和取消，確定就window.open(), 這樣不就不會(huì)被攔截了么

反對(duì) 回復(fù) 2018-07-20

xue5hen
謝謝，我之后再去查查async|await的用法，之前實(shí)際也試過(guò)，但我對(duì)這玩意兒一直用不好，當(dāng)時(shí)測(cè)試沒(méi)成功就撇一邊了，因?yàn)榕率亲约河玫挠袉?wèn)題就沒(méi)提。至于您提到的后一種方法，網(wǎng)上那個(gè)文章里也提到了，因?yàn)闀?huì)多一步用戶確認(rèn)，所以沒(méi)考慮它。

回復(fù) 2018-07-22
xue5hen
我剛又試了試async|await，不知道用法是否正確，現(xiàn)在還達(dá)不到目的，麻煩再幫著看下，給改改 http://jsrun.net/69gKp/edit

回復(fù) 2018-07-22