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

原文地址:https://www.cnblogs.com/guo-xu/p/12064088.html

时间: 2024-11-10 13:57:14

bootstrap选项卡页面中如何关闭当前选项卡及页面的相关文章

HTML页面中直接加载其他JSP页面

1.在经典的框架中填充页面时 要填充2处的页面,2处为内容页面,是另外的一个JSP页面 2.左侧页面代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <script type="text/javascript"> var loadPage = function(pageName){ var basePath =

菜单选项卡-2中方法加载选项卡的内容

html代码 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>菜单选项卡</title> <link rel="stylesheet" type="text/css" href="xd_menu.css"> <script src=

在iframe子页面中获取并操作父级页面的对象/元素

//获取iframe的window对象 // var gbiframe = window.top.document.getElementById("gbiframe").contentWindow; // 通过获取到的window对象操作HTML元素,这和普通页面一样 // var val = gbiframe.document.getElementById("gbaddr").value; // alert(val); 只有FF能使用

如何在 HTML5 页面中嵌入音频?如何在 HTML5 页面中嵌入视频?

HTML 5 包含嵌入音频文件的标准方式,支持的格式包括 MP3.Wav 和 Ogg: <audio controls>    <source src="jamshed.mp3" type="audio/mpeg">     Your browser does'nt support audio embedding feature.  </audio> HTML 5 包含嵌入音频文件的标准方式,支持的格式包括 MP3.Wav 和 O

iframe子页面内刷新父页面中另一个iframe子页面

框架页面如下: <div id="aa" style="float: left; height: 500px; border-right-style: solid; border-right-color: #CCCCFF; border-right-width: 2px;"> <IFRAME id="tree" name="tree" src="/ScienProjectWeb/commonjsp/

JSP页面中中文乱码问题

在编写Jsp页面的时候,发现写入其中的中文在浏览器浏览的时候会出现乱码的情况. 出现乱码的原因分析: 因为页面中对自己的编码格式的声明和页面的实际编码格式不相同,导致的,所以解决办法就是将页面中的声明的编码格式与页面的实际编码格式设为同一个编码. 这个问题可以这样解决: 首先,在页面顶端,用page指令声明此页的编码格式,比如通过contentType="text/html, utf-8"声明为utf-8格式. 其次,通过project->properties->resou

angluarjs中页面初始化的时候会出现语法{{}}在页面中问题

angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题.出现这个的原因是:由于页面或者组件需要渲染加载数据,浏览器和angluarjs渲染页面需要消耗一定的时间,虽然这个时间很多,可能肉眼看不出来,但有的时候加载时间比较长的时候,特别是网络等原因.这样就看到了在渲染前的带有语法的页面.解决的办法如下: 1.ng-cloak ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含的元素: <div ng-cloak> <h1>Hel

iframe的跨域高度自适应(通过跨域页面中嵌套本域页面)

实习不久接到一个任务,在网页中嵌套另一个工程的网页.本以为这是轻而易举的一件事情,结果被测试姐姐折腾得够呛.多次和我谈心说到这个高度固定导致iframe出现滚动条有多么不好看,对于工程整体的影响有多么恶劣.因为跨域的原因,这个需求被拖了许久,真是很痛苦的一件事.最终在我离开公司之前搞定了这个单. 这里就把我的研究过程写下来以供大家参考. 首先需要了解一下何为同域,何为跨域: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名

Jsp页面中的中文乱码问题解决

在编写Jsp页面的时候,发现写入其中的中文在浏览器浏览的时候会出现乱码的情况. 出现乱码的原因分析: 因为页面中对自己的编码格式的声明和页面的实际编码格式不相同,而浏览器解析页面的时候是按照页面中声明的编码格式去解析的,所以当实际编码是A而页面中声明的编码是B时,解析后就会出现乱码.因此,解决办法就是将页面中的声明的编码格式与页面的实际编码格式设为同一个编码. 这个问题可以这样解决: 首先,在页面顶端,用page指令声明此页的编码格式,比如通过contentType="text/html, ut