javascript弹出窗口小结

最新推荐文章于 2019-12-22 10:46:03 发布

baoeni

最新推荐文章于 2019-12-22 10:46:03 发布

阅读量754

点赞数

分类专栏： Javascript CSS+HTML 文章标签： javascript function firefox 问卷调查浏览器 search

本文链接：https://blog.csdn.net/baoeni/article/details/7065421

版权

Javascript 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

CSS+HTML

22 篇文章 0 订阅

订阅专栏

弹出窗口已经被小广告弄得声名狼藉，虽然如此，但是有的时候还是需要用弹出窗口和原来的窗口分开来，比如说显示一个问卷调查。

最基本的就是使用window.open函数，搭配对于弹出窗口的属性作为输入参数。

第一个问题是许多浏览器都有popup blocker，从脚本直接运行window.open会被拦截，大部分用户会看不见你做的窗口。而且safari根本不允许脚本直接执行window.open，一定要通过用户的行为才能触发，对策是我们可以添加click event listener和 keypress event listener到document，这样只要用户和页面有交互就能激发window.open，而且可以绕过popup blocker。

如果需求是希望在关闭某个页面的时候弹出窗口，可以使用onunload事件，大部分浏览器都支持，唯独IE9不支持在onunload中执行window.open

如果你想让弹出的窗口发到主窗口后面，可以使用blur：

win2=window.open(popunder,"yini",winfeatures);
		if(win2 && win2.blur){
			win2.blur();
		}
		window.focus()

~~可惜firefox不支持~~

Firefox其实可以的!!!!

if(jQuery.browser.mozilla){
				win2.init = function(e) {
			        with (e) {
			            (function() {
			                if (typeof window.mozPaintCount != 'undefined') {
			                    var x = window.open('about:blank');
								if(x){
			                    	x.close();
								}
			                }
			                try { opener.window.focus(); }
			                catch (err) { }
			            })();
			        }
			    };
				win2.init(win2);
			}

如果你想先弹出一个窗口，然后当主窗口跳转到另一个页面的时候控制弹出的窗口，可以使用相同的名字调用 window.open('example.html' , 'same_name');，但是在有些浏览器中这是行不通的，这时我们可以用cookie来控制：

弹出窗口：

<script>

	function get_cookie(Name) {
	  var search = Name + "="
	  var returnvalue = "";
	  if (document.cookie.length > 0) {
	    offset = document.cookie.indexOf(search)
	    if (offset != -1) { // if cookie exists
	      offset += search.length
	      // set index of beginning of value
	      end = document.cookie.indexOf(";", offset);
	      // set index of end of cookie value
	      if (end == -1)
	         end = document.cookie.length;
	      returnvalue=unescape(document.cookie.substring(offset, end))
	      }
	   }
	  return returnvalue;
	}


	function checkCookie(){
//		console.info(get_cookie('popunder'));
		if (get_cookie('popunder')=='yes'){
			
			window.close();
		}
	}
	
	function startInterval(){
		setInterval(checkCookie,1000);
	}
	</script>
</head>
<body οnlοad="startInterval();">

跳转窗口：

<script>

	document.cookie="popunder=yes";
	
	</script>

最后提一下如果你怕弹出窗口被block掉，可以使用 window.showmodaldialog，这个缺陷就是类似alert，用户只有关闭modal之后才能控制主窗口。

参看：http://josephj.com/entry.php?id=367&utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+josephj+%28%3F%3F%3F%3F%3F%3F%3F%29&utm_content=Google+Reader