前端技术文档
关注
分享
扫一扫
以实战为线索，逐步深入React开发各个环节，掌握前端常用性能体验优化思路，打造完整前端工作流，提升工程化编码能力和思维能力。
仗剑天涯，从摘要开始
这个作者很懒，什么都没留下…
展开
-
用HTML5里的window.postMessage在两个网页间传递数据
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。观看演示数据发送端首先我们要做的是创建通信发起端，也就是数据源”source”。作为发起端，我们可以open一个原创 2020-08-10 00:47:56 · 528 阅读 · 0 评论 -
前端postMessage和addEventListener踩坑
目标功能：页面一跨域open页面二，页面二通过addEventListener监听到消息后，返回确认信息。页面一通过addEventListener监听页面二发送的确认信息后，将数据包发送给页面二。页面二获取数据包后进行处理。postMessage简介（摘抄自他人博客，如涉抄袭，请联系我）：HTML5提出了一个新的用来跨域传值的方法，即postMessage。我们假设有两个网站，1.com与2.com，我在1.com的页面上通过iframe或window.open或超链接打开了一个2.com的网原创 2020-08-08 00:16:16 · 5677 阅读 · 0 评论 -
postMessage 两网站通信
前言: 本篇文章我将带大家一起来好好认识一下postMessage,包括它的兼容性,对应的API介绍,以及常见的几个使用场景,希望可以给有同样困惑的盆友们一点启发,给需要用这个技术的同僚们一些帮助.postMessage的定义postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.postMessage的兼容性下图是.原创 2020-08-07 20:16:17 · 710 阅读 · 0 评论 -
JavaScript中的递归
译者按: 程序员应该知道递归，但是你真的知道是怎么回事么？原文: All About Recursion, PTC, TCO and STC in JavaScript为了保证可读性，本文采用意译而非直译。递归简介一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。我们来举个例子，我们可以用4的阶乘乘以4来定义5的阶乘原创 2020-07-29 00:45:42 · 140 阅读 · 0 评论 -
JS异步加载的方式
方法一：Script Dom Element 1 2 3 4 5 6 7 8 (function(){ var scriptEle = document.createElement("script"); scriptEle.type = "text/javasctipt"; scriptEle.async = true; scriptEle.src =...原创 2020-07-26 17:07:01 · 276 阅读 · 0 评论 -
js 错误监听方法
错误监听过程大概分为两部分，静态资源加载错误和js文本执行错误1：静态资源加载错误的捕获方法方法一：借助于error事件，这个事件既可以静态资源加载出错，也可以监听js执行过程中的错误。具体错误的类型可以根据srcElement属性进行区分，如果监测js执行过程中的错误，注意静态资源的跨域问题。跨域解决方法：后端设置方法与跨域携带cookie方法一致，前端需要在script标签上添加crossorigin="use-credentials"window.addEventListener原创 2020-07-26 14:51:02 · 2788 阅读 · 0 评论 -
移动端如何进行rem的适配
网上很多都说会pc网页开发，也就会了mobile网页开发。那么实际呢也是如此，但是对于新手来说却摸不着头脑无从下手，一直纠结于适配的问题，那么这里就来展示下rem适配。展示rem适配代码 //rem适配 (function () { var styleN = document.createElement("style"); var width = document.documentElement.clientWidth/16; styl.原创 2020-07-23 15:07:03 · 746 阅读 · 0 评论 -
移动端1px边框问题
解决方案一使用rem为单位。 使用js获取dpr值动态计算视口缩放，设置viewport content属性。 计算得到缩放比后，应该对应给html的font-size 乘 回缩放比。 边框使用px为单位，其余元素均使用rem单位，这样视口的缩放就只会影响到px单位。 一劳永逸的解决方案<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title原创 2020-07-23 12:37:26 · 231 阅读 · 0 评论 -
JS异步之宏队列与微队列
1. 原理图2. 说明JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队：用来保存待执行的宏任务（回调），比如：定时器回调、DOM 事件回调、ajax 回调 微列队：用来保存待执行的微任务（回调），比如：promise的回调、MutationObserver 的回调 JS 执行时会区别这 2 个队列 JS 引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行，也就是...原创 2020-07-22 19:50:36 · 335 阅读 · 0 评论