再具体说一下现在的需求:
如上界面:在新闻发布界面有一个按钮,在点击按钮的时候我需要直接把这个打开的选项卡关闭
实现思路:
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