JavaScript
0110_1024
学习ing
展开
-
关于for in 循环会遍历原型链上的属性的问题
2.只遍历对象自身的属性,而不遍历继承于原型链上的属性,使用hasOwnProperty 方法过滤一下。for in可遍历原型链上扩展的属性,Object.keys() 只遍历自身属性。关于for in 循环会遍历原型链上的属性的问题。原创 2023-09-13 14:57:15 · 504 阅读 · 0 评论 -
for in 的踩坑点
for in 会遍历prototype上的扩展属性,原创 2023-09-13 14:54:54 · 130 阅读 · 0 评论 -
前端导出表格数据到Excel
前端导出页面表格数据到Excel及问题处理原创 2022-08-30 15:51:14 · 613 阅读 · 0 评论 -
本地文件上传按钮组件
封装一款好看的文件上传按钮import React from 'react';import './index.scss';class SelectFileButton extends React.Component { constructor(props) { super(props); } onChange = (event) => { let e = event || window.event; let files = e.target.files;原创 2022-05-18 10:46:52 · 208 阅读 · 0 评论 -
元素隐式具有 “any“ 类型,因为类型为 “string“ 的表达式不能用于索引类型
元素隐式具有 “any” 类型,因为类型为 “string” 的表达式不能用于索引类型在使用typescript时,在对变量进行了类型声明后,在使用for in 的时候出现了这样的问题经过查资料,key值的类型不是string,在javascript中是默认给你转好的,而在Typescript中则不是,因此要么转,要么声明,要么忽略忽略修改tsconfig.json文件中的配置转类型export function isValidKey(key: string | number | sym原创 2021-12-10 16:23:48 · 2215 阅读 · 0 评论 -
根据字体大小计算字符串长度
根据字体大小计算字符串在页面上的长度// 获取字符串px长度export const getTextWidth = (str, fontSize) => { let result = 10; let ele = document.createElement('span') //字符串中带有换行符时,会被自动转换成<br/>标签,若需要考虑这种情况,可以替换成空格,以获取正确的宽度 //str = str.replace(/\\n/g,' ').replace(/\\r/原创 2021-10-26 10:58:03 · 856 阅读 · 0 评论 -
实现浏览器下载文件
实现浏览器下载文件的方法有以下几种,采用fileSaver插件,接收的是文件的Blob,用法是fileSaver.save('文件流', ‘导出文件名’);可适用于get,post方式的下载;采用a标签,配置属性download,href就是你要下载的文件地址,download就是下载的文件名,这种方法只适用于get请求方式;采用iframe也可实现a标签的效果,这种方法只适用于get请求方式;iframe内嵌套form表单,实现模拟提交,可实现post方法的文件下载;...原创 2021-03-29 11:06:42 · 401 阅读 · 0 评论 -
替换字符串中html标签内的空格,tab为 (不替换标签内属性空格)
替换字符串中html标签内的空格,tab为  // 空格替换 private replaceSpace(val: string) { const spaceRex1 = /(<.*?>)(.*?)(<.*?>)/g; const spaceRex2 = /\s/g; // 替换tab空格 let newVal = val.replace(/\t/g, ' '); newVal = ne原创 2021-01-29 18:33:04 · 1106 阅读 · 0 评论 -
在iframe内部通过window.open打开页面使用postMessage通信造成跨域问题解决办法
最近项目为了接入公司其他项目,使用了iframe,一般用到iframe,要通信我第一时间想到的就是postMessage,这次也不例外,在iframe内部打开新页面并发送消息const opener = window.open('xxx.com')在xxx.com页面监听iframe内部发送消息,并回传消息给iframe//1.监听postMessagewindow.addEventListener('message', function (e) { // 处理消息 }}, f原创 2021-01-13 14:55:33 · 2021 阅读 · 1 评论 -
使用postMessage的踩坑记录,解决postMessage的监听事件多次触发
解决 iframe.postMessage()多次触发请求问题方法一,将addEventListener改成onmessagewindow.addEventListener(‘message’, (e) => {})多次调用会多次生成不同的匿名函数e,应指向同一个命名函数window.addEventListener(‘message’, this.handler.bind(this)),命名函数绑定this后,调用会生成不同的对象而onmessage则不会window.onmessage=原创 2020-10-30 16:42:42 · 9160 阅读 · 3 评论 -
解决iframe跨iframe传值跨域问题
最近在项目中遇到过一种情况,在iframe里面再次嵌套了iframe,第一个iframe里面的是别的项目,第二个iframe里面的是自己的项目,然后点击第二个iframe里面的按钮弹出一个最外层的modal,关闭modal刷新第二个iframe里面的数据遇到的问题是:通过postMessage,在第二个iframe里面通过postMessage来通知最外层打开modal,但是最外层无法通过链式访问到第二个iframe;解决思路:由于第一个iframe是别得项目,其实可以让他们做一个中间层的postMes原创 2020-10-21 18:26:56 · 709 阅读 · 0 评论 -
解决使用iframe产生跨域问题
在项目中有时候需要嵌套不同项目的代码,可能是使用不同框架构建的或域名不同,这里就需要使用iframe进行嵌套,但是使用iframe违反了浏览器的安全策略,会造成通信跨域的问题Blocked a frame with origin "https:/*******com" from accessing a cross-origin frame.解决方法是采用html5的postMessage来解决上述问题用法“otherWindow.postMessage(message, targetOrigin,原创 2020-10-21 10:51:45 · 7883 阅读 · 0 评论 -
react实现点击循环数据中的button,弹出弹窗或者产生新的数据
在最近的一次项目中,根据项目需求,需要做一个如下的需求点击+button,产生一个新的链接输入框思路解析:根据数据循环产生多少个button,我们需要循环生成多少个容器,然后将所有生成的容器放到一个公共的数据容器里面,让后面能够使用数据的时候给方便在state中定义一个公共的数据容器:this.state={ addLinks:[], addLink:0 //初始化点击数据}...原创 2020-01-22 15:54:28 · 2381 阅读 · 0 评论 -
Vue父子组件传值
Vue父子组件传值:有四种方式:props,ref,emit 和模板传递通信slot通过props来传值:静态传值就是直接通过props来传递动态传值是通过v-bind来绑定一个要传递值的key,然后后面跟要传递的内容,不过这个内容是可以改变的比如:<input v-model="parentMsg"> <child v-bind:message="parentMsg...原创 2019-06-06 17:10:27 · 715 阅读 · 0 评论 -
JavaScript中this的使用方法总结
JavaScript中this的使用方法总结在JavaScript中,this的使用分为四种场景,具体请参考阮一峰老师关于this的讲解第一种情况是纯函数使用var x =1 ;function test(){ console.log(this.x)}test() //1这里的输出是1,因为在函数中属于全局性的调用,因此this指代window,代表全局对象第二种情况是作为对...原创 2019-04-03 11:41:12 · 312 阅读 · 0 评论