企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] # 样式 ## 直接修改样式表 通过 `document.styleSheets` 获取样式表 ```javascript var styles = document.styleSheets; for(var i in styles){ styles[i].disabled = true; // 修改样式 } ``` ## 位置 ### 屏幕坐标 通过 `screenX` 和 `screenY` 属性来获取屏幕坐标。屏幕坐标是一种以计算机显示器的左上角为原点的坐标系。 ### 窗口坐标 通过 `clientX` 和 `clientY` 属性来获取窗口坐标。窗口坐标是一种以浏览器的显示范围的左上角为原点的坐标系。这一坐标系与文档、元素的滚动情况无关,其坐标值仅由内容的显示位置决定。 ### 文档坐标 通过 `pageX` 和 `pageY` 属性来获取元素在文档中的位置。文档坐标是一种以文档页面的左上角为原点的坐标系。与窗口坐标不同,其坐标值与显示位置无关,是由元素在整个文档中的位置决定的。IE 8及更早的版本无法使用这一坐标。 ### 在特定元素内的相对坐标 ```javascript function onclick(event){ var x = event.clientX; // 窗口坐标系中鼠标指针的 x 坐标 var y = event.clientY; // 窗口坐标系中鼠标指针的 y 坐标 var r = event.target.getBoundingClientRect(); // 窗口坐标系中被点击元素的范围信息 x -= r.left; // 鼠标指针在被点击元素内部的 x 坐标 y -= r.top; // 鼠标指针在被点击元素内部的 y 坐标 } ``` ## AJAX ### XMLHttpRequest 对象的创建 ```javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status === 200){ alert(xhr.responseText); } } } xhr.open('GET', 'http://xxx'); xhr.send(null); ``` readyState 的含义 readyState | 含义 ---|--- 0 | open() 尚未被调用 1 | send() 尚未被调用 2 | 服务器尚未返回响应 3 | 正在接收来自服务器的响应 4 | 完成了对来自服务器的响应的接收 ### 同步通信 同步通信的话,就不需要对 `onreadystatechange` 事件来处理程序进行设定。在执行了 `send()` 之后该处理将会进入待机状态,只要在 `send()` 之后继续书写对响应的处理操作即可。 ### 取消请求 ```javascript var xhr = new XMLHttpRequest(); xhr.abort(); // 取消请求 ``` ### 跨源限制 对源不用的通信进行限制。源指的是由URL的协议、主机名、端口号所构成的元素。 ### JSONP JSONP 是 JSON with Padding 的简称。这里的 Padding 指的是向 JSON 数据中添加函数名。 通过将 `script` 标签的 `src` 属性指定为其它域中的 JavaScript 文件并将其载入,如果动态创建 `script` 标签的话,就能实现对其他域中的数据的动态读取。 ```javascript function foo(json){ console.log(json) } function loadData(){ var elem = document.createElement('script'); elem.src = 'http://api.example.com/some-data&callback=foo'; document.getElementByTagName('head')[0].append(elem); } ``` JSONP 无法在 POST 请求中使用 ### window.postMessage 可以通过 `window.postMessage` 实现安全的跨源通信 ```javascript var frame = document.getElementById("gaFrame"); document.body.onclick=function(){ var sendData={ "name":"deals_list", "event":"deals_click", "e_data":"这是发送的数据" } frame.contentWindow.postMessage(sendData,"*") } var OnMessage = function(e) { var data=e.data; ga('send', 'pageview',"/"+data); } function init() { if (window.addEventListener) { // all browsers except IE before version 9 window.addEventListener("message", OnMessage, false); } else { if (window.attachEvent) { // IE before version 9 window.attachEvent("onmessage", OnMessage); } } }; init(); ``` ### XMLHttpRequest Level 2 要进行跨源通信就必须得到服务器端的许可。所以要在响应中包含 Access-Control-Allow-Origin 这一 HTTP 头部。默认不发送 Cookie,要发送 Cookie 的话要将 withCredentials 设置为 true