解决window.open() 详解 《弹出框浏览器拦截阻止,和弹出狂隐藏地址栏》 JS页面跳转

六月ゝ 毕业季﹏ 提交于 2020-03-02 05:22:02

最近在做支付宝在线支付,场景:在商务网站选择产品后点击确认购买,把数据传递到后台保存数据库,然后直接执行window.open(URL) 结果发先跳转页面会被浏览器拦截阻止打开窗口!经过研究发现内有蹊跷……下面为测试页面相信你一测试就会明白一切!

<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<a href="#" id="a">AAAAA</a>
<input type="button" id="btn" value="Open Baidu" onclick="openwin();" />
<script>
document.getElementById('a').onclick = function () {
    window.open('http://segmentfault.com');
    return false;
};
function openwin() {
	var url = "http://www.baidu.com";
    var a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    a.setAttribute("id", "openwin");
    document.body.appendChild(a);
    a.click();
}
// 自动执行打开
setTimeout(function () {
  window.open('http://segmentfault.com');
}, 1000);
</script>
</body>
</html>

总结:一句话触发打开动作的是用户发起的浏览器不会阻止,如果触发动作是自动执行的则浏览器会阻止打开。(进入ajax是自动的但是ajax执行完)会认为你是弹广告xxxxxxx!想不被阻止就想办法让动作换成用户自己发起的……

最近碰到一个关于浏览器弹出新窗口的问题,像京东商城里面联系客服那个点击按钮之后的效果一样,于是,我就去了解了如何实现这个方法,其实无非就是window.open的操作方法而已,整理了一下,供大家参考。但本来还是建议,能用弹出层,就不要用弹出新窗口这个方法,因为,兼容性上还是存在一定问题的。

基本语法:

window.open(pageURL,name,parameters) 
其中:
pageURL 为子窗口路径 
name 为子窗口句柄 
parameters 为窗口参数(各参数用逗号分隔) 

示例:

<script language="javascript">  
<!-- 
window.open ('http://www.webcjs.com ','newwindow','height=500,width=800,top=0,left=0,
toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no') 
//写成一行 
--> 
</ script >

脚本运行后,http://www.webcjs.com将在新窗体newwindow中打开,高为500,宽为800,距屏顶0像素,屏左0像素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。请对照下面的窗口特征。

窗口特征(Window Features)

设置 说明
fullscreen yes或者no 表示浏览器窗口是否最大化。仅限IE
height 数值 表示新窗口的高度。不能小于100
width 数值 表示新窗口的宽度。不能小于100
left 数值 表示新窗口的左坐标。不能是负值
top 数值 表示新窗口的上坐标。不能是负值
location yes或者no 表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为no,地址栏可能会隐藏(IE),也可能会被禁用。
menubar yes或者no 表示是否在浏览器窗口中显示菜单栏。默认值为no
resizable yes或者no 表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no
scrollbars yes或者no 表示如果内容在视口中显示不下,是否允许滚动。默认值为no
status yes或者no 表示是否在浏览器窗口中显示状态栏。默认值为no
toolbar yes或者no 表示是否在浏览器窗口中显示工具栏。默认值为no

关于窗口特征的几点说明
1) 如果 location 设置参数为no,在IE下可以隐藏地址栏,但在FF,谷歌下面是隐藏不了的。
2)遨游浏览器下面弹出新的窗口跟其他浏览器都另类,他均都是全屏显示,这个真的蛋疼。
 
moveTo()的用法
moveTo()  方法可把窗口的左上角移动到一个指定的坐标。
window.moveTo(x,y) //注明:x,y为窗口新位置的坐标
 
DEMO:拷贝可直接测试

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="javascript"> 
function openwin() {
openWindow=window.open("http://www.webcjs.com", "newwin", "height=500,width=800,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=yes,status=no"); 
//写成一行 
openWindow.moveTo(500,200); //弹出的窗口的左坐标为500,上坐标为500
} 
</script> 
</head> 
<body> 
<a href="#" onclick="openwin()">打开一个窗口</a> 
<input type="button" onclick="openwin()" value="打开窗口"> 
</body> 
</html>


几中常用的JS页面跳转

第二种:
    <script language="javascript">
alert("返回");
window.history.back(-1);
   </script>


第三种:
   <script language="javascript">
window.navigate("top.jsp");
  </script>


第四种:
   <script language="JavaScript">
          self.location='top.htm';
   </script>


第五种:
   <script language="javascript">
          alert("非法访问!");
          top.location='xx.jsp';
   </script>



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!