js常用55个技巧资源-CSDN文库

需积分: 1 75 浏览量 2011-11-29 10:29:14 上传评论收藏 337KB PDF 举报

### JS常用55个技巧详解 #### 1. 屏蔽鼠标右键 - **技巧说明**：通过在页面元素上设置 `oncontextmenu` 事件处理程序，并返回 `false`，可以禁止用户通过鼠标右键打开上下文菜单。 - **示例代码**： ```html <body oncontextmenu="window.event.returnValue=false"> <table border oncontextmenu="return false"><td>no</table> ``` #### 2. 取消文本选取与防止复制 - **技巧说明**：可以通过设置 `onselectstart` 和 `onmousedown` 事件来阻止文本被选中，从而防止用户复制页面中的文本。 - **示例代码**： ```html <body onselectstart="return false"> <body onmousedown="document.selection.empty()"> ``` #### 3. 禁止粘贴 - **技巧说明**：通过设置 `onpaste` 事件并返回 `false` 来阻止用户粘贴内容到表单或其他可编辑区域。 - **示例代码**： ```html <input type="text" onpaste="return false"> ``` #### 4. 防止文本复制 - **技巧说明**：使用 `oncopy` 和 `oncut` 事件来阻止文本的复制和剪切操作。 - **示例代码**： ```html <input type="text" oncopy="return false;" oncut="return false;"> ``` #### 5. 自定义浏览器图标 - **技巧说明**：通过 `<link>` 元素设置自定义的图标，可以让网站在用户的收藏夹或浏览器地址栏显示特定图标。 - **示例代码**： ```html <link rel="Shortcut Icon" href="favicon.ico"> <link rel="Bookmark" href="favicon.ico"> ``` #### 6. 关闭IME输入法 - **技巧说明**：使用 CSS 的 `ime-mode` 属性关闭输入法，适用于支持该属性的浏览器。 - **示例代码**： ```html <input style="ime-mode: disabled"> ``` #### 7. 强制页面在框架内显示 - **技巧说明**：如果当前窗口是顶级窗口，则重定向至指定的框架页面。 - **示例代码**： ```html <script language="JavaScript"> if (window == top) { top.location.href = "frames.htm"; } </script> ``` #### 8. 防止页面被框架调用 - **技巧说明**：检查当前窗口是否位于顶层，如果不是，则重定向至自身，防止被其他网站框架引用。 - **示例代码**： ```html <script language="JavaScript"> if (top.location != self.location) { top.location = self.location; } </script> ``` #### 9. 阻止网页被“另存为” - **技巧说明**：通过 `noscript` 标签插入无效的链接，使得浏览器尝试加载一个不存在的资源，从而阻止用户保存整个网页。 - **示例代码**： ```html <noscript> <img src="/*.html"> </noscript> ``` #### 10. 查看网页源代码 - **技巧说明**：创建一个按钮，点击后打开当前网页的源代码视图。 - **示例代码**： ```html <input type="button" value="查看网页源代码" onclick="window.location='view-source:' + window.location.href"> ``` #### 11. 删除确认对话框 - **技巧说明**：使用 `confirm()` 函数弹出确认对话框，只有当用户确认后才执行删除操作。 - **示例代码**： ```html <a href="#" onclick="if (confirm('确实要删除吗？')) location.href='boos.asp?&areyou=删除&page=1';">删除</a> ``` #### 12. 获取元素的绝对位置 - **技巧说明**：通过递归遍历 DOM 节点，计算元素相对于页面的偏移量。 - **示例代码（JavaScript）**： ```html <script language="JavaScript"> function getAbsolutePosition(e) { let top = e.offsetTop; let left = e.offsetLeft; while (e = e.offsetParent) { top += e.offsetTop; left += e.offsetLeft; } alert(`top=${top}\nleft=${left}`); } </script> ``` - **示例代码（VBScript）**： ```html <script language="VBScript"> Function GetAbsolutePosition() Dim top, left, elem Set elem = document.all.img1 top = elem.offsetTop left = elem.offsetLeft While elem.tagName <> "BODY" Set elem = elem.offsetParent top = top + elem.offsetTop left = left + elem.offsetLeft Wend MsgBox "top=" & top & vbCrLf & "left=" & left, 64, "获取控件的位置" End Function </script> ``` #### 13. 设置光标位置 - **技巧说明**：通过创建文本范围对象并移动其起始位置，使光标定位在文本框内容的末尾。 - **示例代码**： ```html <script language="JavaScript"> function setCursorPosition() { var elem = event.srcElement; var range = elem.createTextRange(); range.moveStart("character", elem.value.length); range.collapse(true); range.select(); } </script> <input type="text" value="123" onfocus="setCursorPosition()"> ``` #### 14. 获取上一页来源 - **技巧说明**：使用 `document.referrer` 属性获取当前页面的来源页面 URL。 - **示例代码**： ```html <script> console.log(document.referrer); </script> ``` #### 15. 操作浏览器窗口 - **技巧说明**：通过调用 ActiveX 对象的方法来控制浏览器窗口的操作，如最小化、最大化和关闭。 - **示例代码**： ```html <object id="windowControl" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Minimize"> </object> <object id="windowControl" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Maximize"> </object> <object id="windowControl" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Close"> </object> ``` 以上列举了部分 JS 技巧及其应用示例，这些技巧可以帮助开发者实现各种功能，提高用户体验的同时增强网站的安全性。在实际开发过程中，根据具体需求选择合适的方法，并确保兼容性和可用性。

资源推荐

资源详情

资源评论