bootstrap選項卡頁面中如何關閉當前選項卡及頁面

再具體說一下現在的需求：

 

 

 如上界面：在新聞發布界面有一個按鈕，在點擊按鈕的時候我需要直接把這個打開的選項卡關閉

 

實現思路：

1）關閉選項卡對應的頁面     2）去除上方選項卡      3）激活前一個選項卡

 

1）關閉選項卡對應的界面：

使用jquery我們很容易想到window.close()關閉當前界面，但是此時瀏覽器報了警告提示：

Scripts may close only the windows that were opened by it

而且也並沒有能夠關閉我想關閉的界面，百度之后有三種方案：

（1）　

　　window.open('','_self','');

　　window.close();

（2）

　　open(location, '_self').close();

這兩種我都試過了，還是一樣有警告信息，並且無法關閉窗口。

最后這個有用的方案：

 

window.location.href="about:blank";
window.close();

 

終於能夠關閉界面了，第一步實現了。

2）去除上方選項卡 

這一步也涉及到一個問題，就是我在選項卡里面的這個界面如何能夠獲取到這個選項卡呢

我們都知道，選項卡點擊之后，會顯示出對應的iframe，而我們現在能操作的界面就是這個iframe里面顯示的界面

所以我們需要在當前頁面的父頁面，也就是iframe所在的頁面中獲取我們需要的選項卡元素：

var nowTab = $("#admui-siteConTabs > div.contabs-scroll.float-left > ul > li.active", parent.document);

通過jquery中的選擇器，我們在后面加了parent.document參數，這樣就是在父頁面中進行元素的選擇。

然后使用nowTab.remove()就可以實現第二步了

3）激活前一個選項卡

獲取到前一個選項卡的方法很簡單，我們上一步已經獲取到了這個選項卡，此時只需要nowTab.prev()就可以獲取到前一個選項卡了

如何進行激活呢？我們分析一下元素構成：

 

 

 可以看到，每一個選項卡對應一個li標簽，這個標簽下方有一個a標簽，我們只要激活這個a標簽就可以了

獲取到a標簽：

nowTab.prev().find('a')

激活的時候還有一個坑，就是jquery和原生js激活a標簽是不一樣的：

$("#id").click()這種方法並不能實現a標簽的點擊事件

原生js不受限制，直接document.getElementById("id").click();

我們這里沒法使用document.getElementById函數，所以需要用jquery函數

只需要將jquery對象轉換成DOM對象就可以了，實現也很簡單：

$("#id")[0].click()

沒錯，取到對象中的第一個元素就是DOM對象，所以我們現在需要使用

nowTab.prev().find('a')[0].click()

這樣第三步也實現了。

 

最后把比較完整的代碼放進來：

if ($.trim($("#title").val()) == "" && $.trim(getContent()) == "") {    // 還未輸入內容
　　var nowTab = $("#admui-siteConTabs > div.contabs-scroll.float-left > ul > li.active", parent.document);
　　window.location.href="about:blank";
　　window.close();
　　nowTab.prev().find('a')[0].click();
　　nowTab.remove();
} else {
　　....
}

 

如果覺得有用就幫忙推薦一下吧。

此博客為博主原創，轉載請注明出處：https://www.cnblogs.com/guo-xu/p/12064088.html