window.open()打开页面的几种方法

[javascript]   view plain  copy
  1. 主要原理:让浏览器以为是用户主动点击的,因此可以利用onclick或者利用<a>标签的_blank属性打开页面  


[javascript]   view plain  copy
  1. function OpenWindow(n, t, i, r) {  
  2.     var u = (screen.width - t) / 2 - r,  
  3.     f = (screen.height - i) / 2 - r,  
  4.     e = window.open(n, "_blank""width=" + t + ",height=" + i + ",toolbars=0,resizable=1,left=" + u + ",top=" + f);  
  5.     e.focus()  
  6. }  

window.open是javascript函数,该函数的作用是打开一个新窗口或这改变原来的窗口,不过一般用来的是打开新窗口,因为修改原来的网页地址,可以有另一个函数,那就是window.location,他可以重定向网页地址,使网页跳转到另一个页面。

一般情况下,如果你直接在js中调用window.open()函数去打开一个新窗口,浏览器会拦截你,认为你将弹出广告等用户不想得到的窗体,所以如果不想让浏览器拦截你,你可以将这个函数改为用户点击时触发,这样浏览器就认为是用户想访问这个页面,而不是你直接弹出给用户。

现在直接使用js触发按钮的click有时候不能弹出新页面,因此需要用户点击控件操作或者构造或隐藏<a>标签弹出。

方法1:

所以常用的方法就是在按钮或者超链接里加入onclick事件,如<a href="javascript:void(0)" οnclick="window.open();return false;">click me</a>这样用户点击这个超链接,浏览器会认为它是打开一个新的链接,所以就不会拦截。

[html]   view plain  copy
  1. <a href="javascript:void(0)" onclick="window.open('http://www.baidu.com','_blank','width=300,height=400,toolbars=0,resiable=1,left=300,top=300');return false;">click me</a>  


方法2(优化方法1):

先用window.open打开一个窗口,然后修改地址。如var tempwindow=window.open('_blank');打开一个窗口,然后用tempwindow.location='http://www.baidu.com';使这个窗口跳转到百度,这样就会呈现弹出百度窗口的效果了。

[javascript]   view plain  copy
  1. <script>      
  2. var new_window = null;    
  3.   
  4. //加一个确认,可以在这个方法里面执行很多适用于自己的判断...  
  5. function sure_open() {    
  6.     if (confirm('确定要打开php爱好者吗?'))    
  7.         open_window(url);    
  8.     else    
  9.         new_window.close(); //关闭窗口  
  10. }    
  11.   
  12. function open_window(url) {      
  13.     new_window.location.href = url;      
  14. }      
  15. </script>      
  16. <input type="button" οnclick="new_window = window.open(); open_window('http://www.justwinit.cn')" value="打开justwinit.cn" />                                     
  17. <input type="button" οnclick="new_window.close();" value="关闭打开的justwinit.cn" />   


或者,可以异步处理

[javascript]   view plain  copy
  1. xx.addEventListener(‘click‘, function () {  
  2.     // 打开页面,此处最好使用提示页面  
  3.     var newWin = window.open(‘loading page‘);  
  4.     ajax().done(function() {  
  5.         // 重定向到目标页面  
  6.         newWin.location.href = ‘target url‘;  
  7.     });  
  8. });  

方法3: 使用其他控件调用<a>标签的_blank属性弹出:不能在ajax内弹出,建议使用方法2。

[javascript]   view plain  copy
  1. function newWin(url, id) {  
  2.    var a = document.createElement(‘a‘);  
  3.    a.setAttribute(‘href‘, url);  
  4.    a.setAttribute(‘target‘, ‘_blank‘);  
  5.    a.setAttribute(‘id‘, id);  
  6.    // 防止反复添加  
  7.    if(!document.getElementById(id)) {                       
  8.        document.body.appendChild(a);  
  9.    }  
  10.    a.click();  
  11. }  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值