随笔分类 -  JS

js媒体查询
摘要:const mq = window.matchMedia('(max-width:400px)') mq.addListener(mediaEvt) funtion mediaEvt(mediaQuery) { //当屏幕=400时会执行这里的函数 console.log(mediaQuery.ma 阅读全文

posted @ 2022-10-12 10:18 In-6026 阅读(45) 评论(0) 推荐(0)

两个非同源页面之间通信,postMessage
摘要:####http://127.0.0.1:3000/a.html <iframe id="frame" src="http://127.0.0.1:3001/b.html"></iframe> <script> iframe.onload = function() { iframe.contentW 阅读全文

posted @ 2022-09-08 02:10 In-6026 阅读(227) 评论(0) 推荐(0)

跨域解决方法
摘要:##jsonp ####原理:利用了img,link,script,iframe标签都不存在跨域限制的特点,使用script标签传递函数 ####大致步骤:前端把一个函数(func)传递到后端,后端做字符串拼接,得到 "func('一段文字')" 的字符串,发送回前端后,前端就会执行 func('一 阅读全文

posted @ 2022-09-08 02:03 In-6026 阅读(34) 评论(0) 推荐(0)

mouseDown,mouseMove,mouseUp更好的实践
摘要:###不好的实践,move 不能太快,否则会监听不到 let flag = false document.addEventListener('mousedown', down) document.addEventListener('mousemove', move) document.addEven 阅读全文

posted @ 2022-07-03 02:30 In-6026 阅读(61) 评论(0) 推荐(0)

判断元素是否将要出现在可视区域 ele.getBoundingClientRect().top
摘要:这种要实时监听.getBoundingClientRect().top <div></div> 1. 获取可视区域高度 height = document.body.offsetHeight 2. 获取元素距离浏览器 body 的 top border的距离 distanceBodyAbove = 阅读全文

posted @ 2022-06-24 02:10 In-6026 阅读(61) 评论(0) 推荐(0)

箭头函数this指向
摘要:公理: 箭头函数的this在定义时就确定了,不会再改变 鉴于网上的各种对this的解释我记不住,记住了也常有和实践不符的情况,我自己形成一套找this的方法,可能与理论不符合,但是目前能够解释我实践的结果 我的歪理 箭头函数的 this 是定义该函数的层级 的父层级的this { b { a } } 阅读全文

posted @ 2022-06-22 00:25 In-6026 阅读(23) 评论(0) 推荐(0)

滚动条位置document.bod.scrollTop总为0
摘要:页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement.scrollTop。 页面没有DTD,即没指定DOCTYPE时,使用document.body.scrollTop。 各浏览器下 scrollTop的差异 IE: 对于没有doctype声明的页面,使用 阅读全文

posted @ 2022-06-20 20:29 In-6026 阅读(38) 评论(0) 推荐(0)

浏览器全屏——document.documentElement.requestFullscreen();
摘要:$('html').on('click keypress', 'a', function(event) { // 不响应真正的A HREF点击事件 event.preventDefault(); event.stopPropagation(); // Trigger fullscreen if (e 阅读全文

posted @ 2022-03-14 20:30 In-6026 阅读(402) 评论(0) 推荐(0)

import重命名——import { deault as name } from,import { export1 as name1,
摘要:###对于导出多个的: import { export1 as name1, export2 as name2 } from 'module.js' ###对于默认导出(即只导出了一个的) import { deault as name } from 'modulejs' //必须是default 阅读全文

posted @ 2022-03-09 17:05 In-6026 阅读(56) 评论(0) 推荐(0)

本地存储
摘要:##cookie ###设置/添加cookie:document.cookie="key=value;" 每次document.cookie都会像后面追加键/值 ###子cookie 因为每个域下允许的cookie数量有限,所以出现子cookie概念 docuemnt.cookie = "k1=v2 阅读全文

posted @ 2022-02-28 00:33 In-6026 阅读(27) 评论(0) 推荐(0)

webSocket
摘要:https://www.runoob.com/html/html5-websocket.html 阅读全文

posted @ 2022-02-27 02:00 In-6026 阅读(11) 评论(0) 推荐(0)

fetch
摘要:优点: 用起来比XMLHttpRequest更现代化(方便) 缺点: 只能异步,XHR可以选择异步或者同步。但是可以通过async/await自己手动实现 fetch是有兼容问题的。IE系列是完全不支持的,主流浏览器的早起版本也不支持,所以如果在项目中使用需要做兼容方案处理。 fetch 不管请求处 阅读全文

posted @ 2022-02-27 01:40 In-6026 阅读(100) 评论(0) 推荐(0)

响应头,请求头,状态码
摘要:https://blog.csdn.net/belongtocode/article/details/103338371?utm_medium=distribute.wap_relevant.none-task-blog-2~default~baidujs_baidulandingword~defa 阅读全文

posted @ 2022-02-26 00:34 In-6026 阅读(34) 评论(0) 推荐(0)

GMT转时间戳
摘要:let gmt = 'Fri, 25 Feb 2022 12:34:19 GMT' //转北京时间,北京时间就是gmt + 8小时 let date = new Date(gmt) Fri Feb 25 2022 20:34:19 GMT+0800 (中国标准时间) //转时间戳 let times 阅读全文

posted @ 2022-02-25 21:16 In-6026 阅读(52) 评论(0) 推荐(0)

缓存
摘要:缓存通过HTTP协议使用请求头和响应头协同作用实现 响应头:(request) 作用 cache-control 其值‘max-age=100’用于控制文件在本地缓存的有效时长,表示缓存100s之后失效(是从发出请求开始算) expires 与cache-control类似。Expires的值是一个 阅读全文

posted @ 2022-02-25 02:11 In-6026 阅读(63) 评论(0) 推荐(0)

常见文件后缀对应的MIME类型
摘要:文件后缀 Mime类型 说明 .flv flv/flv-flash 在线播放 .html或.htm text/html 超文本标记语言文本 .rtf application/rtf RTF文本 .gif image/gif GIF图形 .jpeg或.jpg image/jpeg JPEG图形 .au 阅读全文

posted @ 2022-02-24 23:56 In-6026 阅读(307) 评论(0) 推荐(0)

XMLHttpRequest
摘要:基本格式,readyState,HTTP头部,超时,判断响应的MIME类型,进度事件,跨源(跨域),预检请求,凭据请求 ###基本格式: let xhr = new XMLHttpRequest() 【1】 xhr.open(method, url, async)//method: string, 阅读全文

posted @ 2022-02-24 23:54 In-6026 阅读(71) 评论(0) 推荐(0)

生成真随机数——crypto.getRandomValues(new Uint8Array(1))
摘要:Math.random是伪随机数,是有法可循的,虽然更快,但有时使用在密码等重要信息中不如crypto.getRandomValues()安全 crypto.getRandomValues(new Uint8Array(1)) //生成真随机数 crypto.getRandomValues() // 阅读全文

posted @ 2022-02-24 01:06 In-6026 阅读(1256) 评论(0) 推荐(0)

创建一个新html标签
摘要:创建一个叫new-ele的新标签 class NewElement extends HTMLElement {//NewElement 是随便起的,继承HTMLElement constructor() { super(); //this就是当前标签 } } customElements.defin 阅读全文

posted @ 2022-02-24 00:47 In-6026 阅读(41) 评论(0) 推荐(0)

web组件——template标签,影子DOM,自定义组件
摘要:##template标签 innerHTML会带来安全问题,document.createElemt()又太过麻烦,template就很方便且安全 <div id="foo"></div> <template id="bar"> <p>I am inside template</p> </templ 阅读全文

posted @ 2022-02-24 00:43 In-6026 阅读(245) 评论(0) 推荐(0)

导航