一个项目的需求：前台的留言表单中基于用户的输入，有两种不同情况的提交方式，一种是当前页面，另外一种是弹出另外一个页面，通过JS控制表单的target属性即可实现。为了保证良好的客户体验，通过当前页面跳转提交成功后，会返回上一页，通过弹出方式提交的结果会在展示之后关闭。于是我想到了最简单的方式，在目标页面加上了”<script>window.history.go(-1)||window.close()</script>”这一段代码，经过简单测试，发现效果良好，功能上完全能够满足要求。
但是，项目上线之后，有用户反映，留言提交之后，有时候浏览器窗口会出现非正常的关闭现象，主要表现是在当前页面提交后，浏览器返回提交页面，然后马上会关闭。仔细研究了一下window.history.go这个函数，发现这个函数不管执行成功或者失败，都不返回，即window.close()始终都会运行。那么换了一种方式也解决这个问题：
if(window.history.length<=1){
window.close();
}else{
windows.history.go(-1);
}
这里用history.length判断当前页面是否是_blank打开的，关于这个属性的详细介绍可以点击这里，这样的话，就可以解决上面的问题。问题是解决了，但是，得分析分析为什么用window.history.go(-1)||window.close()的时候，会产生那么多的问题，总结了一下，主要有以下问题：
1， 既然window.history.go(-1)不返回值，那么window.close()必然执行，在本页面提交的时候，为什么有的浏览器页面没有关闭，而有的浏览器页面有会被关闭呢？
2， 当window.history.go(-1)执行成功后，页面实际上已经返回了，而此时window.close()再执行时，在一些浏览器下会关闭当前页面，这算是js的跨域执行吗？
3， 存在一种情况，有另外一个页面，页面上有个锚链接，target属性是_blank，如果点击这个链接到达留言页面，然后留言，如果是弹出提交，则弹出的提示页面会关闭，如果是在本页面提交，那么所有浏览器在页面返回后都会关闭当前页面，不会出现问题1中，有的浏览器关闭，有的不关闭的情况。
博主对这三个问题进行了逐一的分析，发现问题1中，在Chrome下，页面不会关闭，在IE等其它浏览器下页面会关闭，为什么window.close()执行了，页面没有被关闭呢？在连续几次测试中，我观察到了console中的提示，由于页面的调转，console中会快速的提示“Scripts may close only the windows that were opened by it.”这应该是权限的问题，虽然window.close()执行了，但是前一个页面不能去关闭第一个页面。
第一个问题解释通了，那么第二个问题，为什么有些浏览器窗口又被关闭了呢？这是JS跨域执行了吗？个人推测原因有两点，第一点是，由于两个页面是在一个窗体内跳转，加上JS执行速度很快，所以页面就被关闭了，如果给window.close()加上延时，则不会出现这种情况：window.history.go(-1)||setTimeout(function(){window.close()},1000)
关于问题3，猜测因为是新产生的一个窗口，所以浏览器给了关闭的权限。
以上所有结论均来源于实际测试和相应推测，并没有官方的论据支持，如果你发现有相关文档资料或不同看法，欢迎@我或者直接给我留言。
评论列表: