一,弹出窗口:
1,window.open(url,target,status,b)
url: 要跳转的链接;
target:_self,_parent,_top和_blank四个参数,只有_blank是新开窗口;
status: 新开窗口的大小,位置等等信息;
b:布尔值,是否取代浏览器页面当前页面的url记录,只在不新开页面的情况下有效。
,2,浏览器的安全措施:
由于一些广告商简单粗暴的过度使用该window.open()方法来弹出广告,迫使各大浏览器都对该方法做出了安全限制,在现代的浏览器中,只有在用户行为触发的同时,window.open()才有效果,如下:
document.querySelector(‘button‘).addEventListener(‘click‘, function (ev) { setTimeout(function () { let page = window.open(‘https://test.qtz360.com/index.html‘,‘_blank‘,‘height:200,width=400,top=100,left=200,resizeable=no‘); console.log(page); //null },2000); },false);
上面的代码,在按钮点击的时候,页面不会跳转,这是因为setTimeout是异步事件,浏览器误以为是不友好的弹框,所以我们在需要使用window.open()的方发时,一定要注意不要嵌套在异步的方法里面,会被浏览器阻止。常见的场景有:在AJAX,请求的时候,去用window.open()方法,AJAX默认是异步的请求,我们要注意写成同步才可以执行上述效果!当然,为了给用户反馈,我们需要在浏览器阻止window.open()的时候,给出相应的提示,下面给出了异常处理的方法:
document.querySelector(‘button‘).addEventListener(‘click‘, function (ev) { setTimeout(function () { let page; try{ page = window.open(‘https://test.qtz360.com/index.html‘,‘_blank‘,‘height:200,width=400,top=100,left=200,resizeable=no‘); //浏览器阻止了弹框,会返回null if(page === null){ page = true; } }catch (ex){ page = true; } if(page){ alert(‘弹框被浏览器阻止了,请在浏览器上允许弹框弹出!‘); //弹出 } },2000); },false);
上述代码可以检测window.open()的被浏览器阻止后提醒的异常操作。
二,系统对话框:alert, confirm, prompt
1.,alert:只有提示的单一功能;
2,confirm:
if(confirm(‘您好!‘)){ alert(‘确认了!‘); }else{ alert(‘请确认!‘); }
注意:会弹出确认和取消2个按钮,点击确认 弹出确认提示,相反,提示去确认!
3,prompt:
let result = prompt(‘What your name?‘,‘‘); if(result != null){ alert(‘Hello,‘+ result); }else{ alert(‘请输入姓名!‘); }
说明: 点击确认会返回文本框里面的值,取消则返回false,这都算是一个增强web交互的提示框。