BOM学习2

Posted bravehead

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BOM学习2相关的知识,希望对你有一定的参考价值。

一,弹出窗口:

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

   

以上是关于BOM学习2的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript学习——BOM对象

JavaScript学习日志:BOM

从零开始学习前端JAVASCRIPT — 5JavaScript基础BOM

--BOM

BOM学习

学习javaScript必知必会~BOM模型定时器原理清除定时器