最近工作中有个需求:点击按钮时打开一个页面,此处取名为page1,打开页面的前提条件是如果有人已经打开过page1页面并且没有关闭时请求ajax判断session是否为空,如果为空则将用户名和文档id存入session,如果不为空则提示已有人打开此页面。

$(function(){
addassbutton('_FORM_PF_sp_f22860');
function addassbutton(textid){
$('#'+textid).after("<br/><input type='button' id='visualButton' value='' style='background:url(/fileftp/2013/05/2013-05-13/U32P4T47D26207F980DT20130513164525.gif) no-repeat; border:0px;width:108px;height:28px;padding-bottom:16px;margin-left:5px;'/>");
}
$("#visualButton").bind('click',function(){
var ztselected = $("select[name=_FORM_PF_sp_f22820] option:selected").val();
if(ztselected==''){
alert("请先选择专题名称");
return;
}else{
if(did_gspsass !==''){
$.ajax({
//async:false,
url: '/api/checkSess/' + username_gspsass + '/' + did_gspsass,
type: 'get',
dataType: 'json',
success:function(res){
console.log(res);
console.log(res.username === username_gspsass);
if(res.session==='true'){
openWin();
}else{
//alert("不允许多人同时操作,紧急情况请联系<strong>" + res.username + "</strong>");
alert("不允许多人同时操作");
}
}
})
}else{
openWin();
}
}
});
});

function openWin(){
       window.open('/gsps/visualization/visual.html','newwindow','height=800,width=1500,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no');
  }

点击"可视化编辑"按钮时先请求ajax时会出现window.open弹窗被chrome拦截的问题(参考1链接),原因:由于window.open的执行时机,window.open在ajax中执行,无论是同步还是异步,等待ajax返回结果都需要一定的时间,当得到返回的结果然后再执行window.open时,chrome认为是不友好的行为,非用户主动点击打开弹窗),所以会被屏蔽。

解决方法一:允许被阻止的页面打开,

解决方法二:先打开一个空白页,然后等ajax回来的结果,拿到链接地址,替换掉之前空白页的url(参考2链接)。

注意: 使用解决方法一时,用户第一次打开页面newwindow(不关闭),当用户再次点击按钮触发时没有反应,因为newwindow已经打开,但是需要用户手动去找打开的newwindow,不能自动弹出已经打开的页面,容易让用户以为程序出现了问题,不利于用户体验,如若有解决方法,请在评论区留言,多谢!!!

           使用解决方法二时,用户第一次打开页面newwindow(不关闭),当用户再次点击按钮触发时会弹出一个空白页覆盖newwindow,暂未找到解决方法,如若有解决方法,请在评论区留言,多谢!!!

不调用ajax时,代码如下:

点击按钮时会打开visual.html页面(名称为page1),并且再次点击按钮时打开的还是page1页面,会自动弹出;

参考:1、http://blog.csdn.net/xufaxi/article/details/6647952

2、https://segmentfault.com/q/1010000006760018/a-1020000006765547

3、http://www.cnblogs.com/catalina-/p/5846353.html

关闭浏览器或者关闭使用window.open打开的页面时添加监听事件的更多相关文章

  1. 用window.showModalDialog()打开的页面Request.UrlReferrer为null

    今天在解决一个问题,怎么也找不到解决方案.我的一个窗体是IE通过window.showModalDialog()打开的,但为了防止用户手工输的地址,所以我需要判断是通过别的页面调整获得,用Reques ...

  2. window.onresize监听事件

    window.onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生. 支持onresize的标签:<a>, <address>, <b>, ...

  3. vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  4. 让$(window).scroll()监听事件只执行一次

    可以用jQuery中的unbind()来进行事件解绑. $(window).scroll(function() { console.log("滚离顶部" + $(document) ...

  5. 打开jsp页面时,显示空白页。

    打开jsp页面时,显示空白页.   #foreach($e in $listPlanItem)          #set($listPlanDetail=$!e.get(2))        < ...

  6. 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  7. IE浏览器的脚本文本框监听事件

    一.IE8的文本框监听事件 由于在IE8所以input和propertychange都不能用,终于皇天不负有心人让我找到了这个:https://github.com/sophiebits/jquery ...

  8. JS事件 加载事件(onload)注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。 2. 此节的加载页面,可理解为打开一个新页面时。

    加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...

  9. Chrome下关闭浏览器,关闭非脚本打开的页面

    今天脚本了里写了一句话: window.close() 但是浏览器却报了警告提示:Scripts may close only the windows that were opened by it,而 ...

随机推荐

  1. linux 解压 WinRAR 压缩文件

    1.Download rar for linux wget http://www.rarlab.com/rar/rarlinux-x64-5.5.b1.tar.gz 2.Configure rar t ...

  2. [转].NET Framework 4.5 五个很棒的特性

    自.NET 4.5发布已经过了差不多1年了.但是随着最近微软大多数的发布,与.NET开发者交流的问题显示,开发者仅知道一到两个特性,其他的特性仅仅停留在MSDN并以简单的文档形式存在着. 比如说,当你 ...

  3. 反编译之paktool工具

    1.官网配置mac教程https://ibotpeaches.github.io/Apktool/install/ (1)右键选择:链接储存为(命名:apktool,格式:选择所有文件): (2)下载 ...

  4. 【转载】Fiddler抓包及模拟服务端

    此文章转载公众号‘云测学院'链接:https://mp.weixin.qq.com/s/qXmBDh980nBJ8IchbRGC3Q 及公众号gloryroadtrain 在HTTP接口的测试过程中, ...

  5. ES6之主要知识点(六)数组

    引自http://es6.ruanyifeng.com/#docs/array 1.扩展运算符(...) 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用 ...

  6. oracle中utl_file包读写文件操作实例学习

    在oracle中utl_file包提供了一些操作文本文件的函数和过程,学习了一下他的基本操作 1.创建directory,并给用户授权 复制代码 代码如下: --创建directory create ...

  7. CAS增加免登陆(Remember Me)功能

    1. 打开deployerConfigContext.xml 在 authenticationManager 的bean中增加 <property name="authenticati ...

  8. springboot新增jsp的支持

    一.添加依赖 <!-- 添加对jsp的支持 --> <!-- web 依赖 --> <dependency> <groupId>org.springfr ...

  9. JZOJ5894【NOIP2018模拟10.5】同余方程

    题目 Description

  10. LUGOU P3374 【模板】树状数组 1(CDQ 分治)

    传送门 拿个二维偏序练练cdq板子,其实就和归并排序差不多,复杂度不太会,似乎nlogn?. #include<iostream> #include<cstdio> #incl ...