最近工作中有个需求:点击按钮时打开一个页面,此处取名为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. Android开发 EditText按回车按键后出现 focus search returned a view that wasn't able to take focus! 错误

    问题描述 将EditText这个View成为了ListView或者RecyclerView的item时,在按输入法的回车/下一步/next时会出现的 focus search returned a v ...

  2. redis深入学习(一)-----CAP、redis数据类型

    NoSQL数据库的四大分类 KV键值: memcache+redis 文档型数据库(bson格式比较多): MongoDB MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在 ...

  3. 表单控件绑定v-model

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  4. Java序列化接口的作用总结1

    一个对象有对应的一些属性,把这个对象保存在硬盘上的过程叫做”持久化”. 把堆内存中的对象的生命周期延长,存入硬盘,做持久化操作.当下次再需要这个对象的时候,我们不用new了,直接从硬盘中读取就可以了. ...

  5. Git命令使用和配置

    git config --global user.name "your name" git config --global user.email "your email& ...

  6. 06_springmvc之参数绑定(pojo和集合)

    一.包装类型pojo参数绑定 实现方法: 第一种方法:在形参中 添加HttpServletRequest request参数,通过request接收查询条件参数. 第二种方法:在形参中让包装类型的po ...

  7. Django项目: 3.用户注册功能

    本章内容的补充知识点 导入库的良好顺序: 1.系统库 2.django库 3.自己定义的库(第三方库) redis缓存数据库的数据调用速度快,但是不利于长时间保存. mysql用于长时间存储,但是调用 ...

  8. Nmap扫描原理(上)

    转自:https://blog.csdn.net/qq_34398519/article/details/89055991 Nmap是一款开源免费的网络发现(Network Discovery)和安全 ...

  9. Odoo Documentation : Recordsets

    Other recordset operations Recordsets are iterable(可迭代的) so the usual Python tools are available for ...

  10. webpack:Cannot find module 'extract-text-webpack-plugin'

    问题: 在终端中使用此命令安装了extract-text-webpack-plugin,npm install -g extract-text-webpack-plugin并在webpack.conf ...