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