JS 點選元素髮ajax請求 開啟一個新視窗

龍恩0707發表於2014-05-02
JS

JS 點選元素髮ajax請求 開啟一個新視窗

       經常在專案中會碰到這樣的需求，點選某個元素後，需要發ajax請求，請求成功以後，開發需要把連結傳給前端(或者說請求成功後開啟新視窗)，前端需要通過新視窗開啟這個連結，其實這樣的原理大家可能覺得非常簡單，想起來非常簡單，用JS中的window.open就可以實現開啟新的視窗，或者點選div元素，發ajax請求成功後，動態把連結傳給a標籤，然後再觸發a標籤事件，也可以實現，對吧？曾幾何時，我也曾經把這樣的問題發到JS群裡面去，很多JS社群朋友說 龍恩 這麼簡單的問題你都實現不了？你怎麼做前端的？大家都覺得非常簡單，最後討論了一個多小時，都沒有結果！很多人提議用window.open，還有人提用location.href ="" 然後設定target="_blank"等，還有提出用form表單去提交，但是不管他們用任何方式，效果都一樣，在主流的瀏覽器 firefox and chrome 結果是：被瀏覽器攔截了！(IE我不管)，正常的情況下 點選一個元素 用window.open開啟一個新的網頁 都沒有問題，並且不會被瀏覽器攔截！這個大家都知道，但是為什麼需要多一步發ajax請求 且被瀏覽器攔截了呢？為了解決這麼一個問題，肯定要做做demo，我是這樣這樣做的：

<div class = "testA" style="cursor:pointer;">點選我彈出一個新視窗</div>

JS如下：

$('.testA').unbind('click').bind('click',function(){
    $.ajax({                          url:'http://localhost/demo/windowopen/test.php',
        'type':'POST',
        dataType:'json',
        success: function(data){
            if(data && data.success) {
                           window.open('http://www.baidu.com');
                    }
                }
            });
        });

URL 我可以不管 反正就是一個請求 且是同域的，這是ajax非同步的請求，為了解決這個問題，我們可以讓他們同步請求 就可以實現，firefox and chrome也不會被攔截了！

JS程式碼如下：

$('.testA').unbind('click').bind('click',function(){
            $.ajax({
                url:'http://localhost/demo/windowopen/test.php',
                'type':'POST',
                async:false,
                dataType:'json',
                success: function(data){
                    if(data && data.success) {
                        window.open('http://www.baidu.com');
                    }
                }
            });
        });

設定同步的請求就可以實現了，(async:false) 。大家都可以測試下！

相關文章