BOM学习2

Posted 2020-10-19 bravehead

一，弹出窗口：

　　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交互的提示框。