跨域及CORS官方跨域

JSONP jsonp跨域的实现仅限于GET请求,不可用于POST 说明:实现的基本思路是利用html中script标签本身可跨域的特性,在发送请求时,在页面中创建script标签,追加到页面中。这实际上就像利用script标签引入外部资源 /*main.js*/ //申明handle函数 function handle(data) { //do something.... } ele.onclick = function () { //1.创建script标签 const script = document.createElement("script") //2.修改script的src属性 script.src = "http://127.0.0.1:8000/jsonP" script.id="tempScript"//添加id方便移除 //3.追加到页面中 document.body.appendChild(script) } /*server.js*/ app.get('/jsonP', (request, response) => { const data = { exist:1, msg:"用户名已经存在!" } let str = JSON.stringify(data) response.send(` handle(${str}); document.body.removeChild(document.querySelector("#tempScript")) `) }) 注意:response.send()/response.end()中利用ES6语法规范中的模板字符串直接返回一段js代码,script标签会自动解析并作用到页面上 CORS 如果要实现跨域,官方的解决方案是**CORS**,即通过设置CORS响应头实现跨域,这种跨域GET或POST请求均有效 //服务端设置响应头 app.all('/data', (request, response) => { response.setHeader('Access-Control-Allow-Origin', '*')//允许来自所有域的请求 response....

Aug 11, 2020 · 1 min · Archai

剪贴板功能实现

经常会用到指定内容的复制粘贴问题,用到document的execCommand 方法,为此,我将这个功能封装为一个简单的函数: function doCopy($el, {deepCopy = false, copyTips = true, language = "Chinese", bgColor = "#ff6666", fontColor = "#fff"} = {}) { let tempEl = $("<input id='selectEl' type='text' value=''>").val($el.text()) if (deepCopy) { tempEl.val($el.html()) } tempEl.appendTo($("body")) document.querySelector('#selectEl').select(); document.execCommand('copy'); tempEl.remove() if (copyTips) { let tipEl = $("<div class='copyTips' >成功复制到剪切板</div>") tipEl.css({fontFamily: "'Microsoft YaHei', sans-serif",fontSize: "1.2rem",position: "fixed",top: "1rem",textAlign: "center", left: "50%",fontWeight: "bolder", borderRadius: ".5rem",marginLeft: "-8rem",width: "16rem",height: "3rem", lineHeight:"3rem", background: bgColor,boxShadow: "0 6px 10px -8px #000",color: fontColor, letterSpacing: "4px",boxSizing: "border-box",padding: "0 10px 0 10px", display: "none"}) if (language === "English") { tipEl....

Jul 7, 2020 · 1 min · Archai

Jquery一些操作

Jquery属性操作 1.属性 attr(attrName [,attrValue]) 操作所有属性(自定义和内置的) prop(attrName [,attrValue)) 操作HTML元素内置属性 removeAttr(attrNam)删除属性 removeProp(attrName) 并不能删除HMTL元素上的属性 2.CSS类 addclass()添加一个class值 removeClass()删除一个class值 toggleClass()切换一个class值(有则删掉该class,没有则加上,其他class不动) hasClasss() 判断是否有指定class 3.HTML代码/文本/值 html([html]) 相当于innerHTML text([text)相当于innerText val([value]) 设置/获取表单控件的值 Jquery样式操作 1.CSS操作 css(atr,[value])设置/获取CSS值 参数可以是一个对象的形式css({atr: value,}) 2.位置 offset()[.left/.top]元素在页面中的坐标 设置只需要传一个对象即可 {"left:num,top:num"} position()[.left/.top] 元素在第一个定位的祖先元素内的坐标 (只读!) scollTop … scollLeft … 3.尺寸 width()/height()内容尺寸 innerwidth()/ innerHeight()内容尺寸+ padding outerWidth()/ outerHeight() 盒子的尺寸 Jquery筛选操作 1. 过滤操作 first () last() eq() not() filter() slice () has() 3.串联 add()把选中的元素加入当前集合 addBack()把调用该方法的元素加入当前集合 end()返回最后一次破坏性操作之前的DOM...

Apr 23, 2020 · 2 min · Archai