前端杂记(关闭tab，定时函数，方法的理解)

最新推荐文章于 2022-03-06 23:45:20 发布

摩羯的成长期

最新推荐文章于 2022-03-06 23:45:20 发布

阅读量586

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/weixin_42603009/article/details/105958216

版权

front 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近得到一个道理：不要给不懂的人讲底层。他不懂也不在乎。你需要的是告诉他，这样实现不了。然后给出你的方案即可。
1，关闭tab。
官网一直实我推荐的方式：（建议先看）
windows官方链接

比如现有需求：
第三方跳转进来，新打开一个tab，判断根据URI中没有该用户。关闭该页面。
在我们写之前上面链接只是认识了它。我们来进一步了解。
打开百度首页，输入window:
在这里插入图片描述
里面有很多都东西（常用举例几个）：都可window点出来。没事你就点出来看看。

Cookie:
localStorage:
origin: "https://www.baidu.com"
os: "windows"
osversion: "win10"
open
close
confirm: close时出现提示设置

实验一：原生手新建tab，下面的提示很明显了，是无法用close关闭的。换句话说你手动打开tab复制url进去，是无法关闭的。这种情况是不可避免的。客户操作，我就想复制怎么办？
解决方式：去到空白页或者错误提示页(自己写的（不推荐）)，推荐使用回到原生页。但是要防止信息泄露，不可后退。
在这里插入图片描述
实验二：发现新打开一个页面。然后新建的页面输入window.close()。发现页面关闭。第一个参数url,第二个指定当前页_self，新建页_blank

 	window.opener=null; // 返回使用 window.open() 方法打开该页面的窗体对象；为什么要用这个？因为history长度不一定就是1
    window.open('','_self'); // 打开自己
    window.close(); // 自身处理
    // 未open打开空白处理，回退到该浏览器首页。
    window.open('_blank','','');
    history.pushState(null, null, document.URL);
      window.addEventListener('popstate', function () {
         history.pushState(null, null, document.URL);
    });
    // ie适配
     window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
    window.history.forward(1);

如何查看浏览器类型：（上面我们已经解决了浏览器类型，如果有什么特殊的类型用下面的方法去判断处理）
在这里插入图片描述

// 这个iE的判别式，需要你看你的需求版本需要
let isIE = !!window.ActiveXObject || "ActiveXObject" in window;
let isChrome = window.navigator.userAgent.indexOf('Chrome') > -1;
let isFireFox = navigator.userAgent.indexOf("Firefox") > -1;

2，定时函数
三种方式setTimeOut 和interal，利用for 或者while达到延迟的效果（后者不推荐，浪费资源）。
1，一次性的，时间到就执行setTimeOut

<!DOCTYPE html>
<html>
<body>
<button onclick="display()">提示出现</button>
<script>
function display() {
  // 一种是一次性的，时间到就执行
  // 清除的方法 clearTimeout(timer) 清楚方法，都是
  setTimeout(function(){ document.getElementById("demo").innerHTML = Date(); }, 1000);
  var timer = setTimeout(()=>{ document.getElementById("demo").innerHTML = Date(); }, 2000); // 箭头函数
  clearTimeout(timer);
}
</script>
<p id="demo"></p>
</body>
</html>

2，如果你只想重复执行可以使用 setInterval()
clearInterval(timer) 清除方式。

<!DOCTYPE html>
<html>
<body>
<button onclick="display()">提示出现</button>
<script>
function display() {
  let timer = setInterval(function(){ document.getElementById("demo").innerHTML = Date(); }, 1000);
}
</script>
<p id="demo"></p>
</body>
</html>

3，利用循环实现：
如果上面还不能满足的你的需求，只能用空间来换时间。(不到万不得已不要用这种)。也可以利用其他循环实现。

<!DOCTYPE html>
<html>
<body>
<button onclick="display()">提示出现</button>
<script>
function display() {
  let start = new Date();
  let end = new Date();
  while(end - start < 3000){
  	end = new Date();
  }
  document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>

3，方法的理解
回头再去看一眼window中所包含的方法，全了。其他的也是对这个封装完善。
如下举例(太多不一一举例)：

onblur: 失焦
onfocus: 聚焦
onclick: 点击
onchange: 改变
ondblclick: 双击
ondrag:拖拽
oninput:向 <input> 中尝试输入
onkeydown: 按下
onmousedown:鼠标点下
onmouseenter: 鼠标进入
onmouseleave: 鼠标离开
onmousemove: 鼠标移动
onmouseout: 鼠标移出指定对象
onmouseover: 鼠标悬停
onmouseup: 松开鼠标
onselect:当被选中时执行，比如文本
onresize:窗口或框架被调整大小时发生
onprogress:正在下载时执行
onpause: 暂停执行
onplay: 开始播放执行
onplaying: 暂停后准备开始播放时执行

究极老6。如果你现在正有这么一个想法：
有没有这么一个方法，对，就这么一个，输出window，查看方法。你能想到都是有的。😄😄

摩羯的成长期

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端杂记(关闭tab，定时函数，方法的理解)

最近得到一个道理：不要给不懂的人讲底层。他不懂也不在乎。你需要的是告诉他，这样实现不了。然后给出你的方案即可。1，关闭tab。官网一直实我推荐的方式：（建议先看）windows官方链接比如现有需求：第三方跳转进来，新打开一个tab，判断根据URI中没有该用户。关闭该页面。在我们写之前上面链接只是认识了它。我们来进一步了解。打开百度首页，输入window:里面有很多都东西（常用举例...
复制链接

扫一扫