Javascript中最常用的55个经典技巧
根据提供的文件信息,我们可以归纳总结出一系列与JavaScript相关的实用技巧,这些技巧对于前端开发者来说非常有用。接下来将详细解释每一个技巧及其应用场景。 ### 1. 阻止右键菜单 **技巧**: 使用 `oncontextmenu` 属性阻止浏览器默认的右键菜单出现。 ```html <table border oncontextmenu="return false;"> <td>无法右键点击的表格</td> </table> ``` **应用**: 当你需要防止用户通过右键进行某些操作时(比如复制表格内容)可以采用这种方法。 ### 2. 禁止文本选中 **技巧**: 通过 `onselectstart` 属性来禁用文本选择功能。 ```html <body onselectstart="return false"> ``` **应用**: 如果你希望网页上的文字不能被用户选中复制,可以使用这个技巧。 ### 3. 禁止粘贴 **技巧**: 使用 `onpaste` 属性禁止用户在输入框中粘贴内容。 ```html <input type="text" onpaste="return false;"> ``` **应用**: 在一些安全敏感的应用场景中,如密码输入框,可以通过这种方式增强安全性。 ### 4. 禁止复制和剪切 **技巧**: 分别通过 `oncopy` 和 `oncut` 属性来禁止复制和剪切操作。 ```html <input type="text" oncopy="return false;" oncut="return false;"> ``` **应用**: 在需要保护网页内容不被轻易复制或剪切的情况下,可以使用这两个属性。 ### 5. 设置 IE 浏览器的图标 **技巧**: 使用 `<link>` 标签为 IE 浏览器设置图标。 ```html <link rel="Shortcut Icon" href="favicon.ico"> ``` **应用**: 这个技巧可以让网站在用户的收藏夹里有一个统一且易于识别的图标。 ### 6. 设置其他浏览器的图标 **技巧**: 使用 `<link>` 标签为非 IE 浏览器设置图标。 ```html <link rel="Bookmark" href="favicon.ico"> ``` **应用**: 类似于上面的技巧,但针对的是非 IE 浏览器。 ### 7. 禁用输入法 **技巧**: 通过 CSS 的 `ime-mode` 属性来禁用输入法。 ```html <input style="ime-mode:disabled"> ``` **应用**: 在一些只需要数字或英文输入的场景下,禁用输入法可以提高用户体验。 ### 8. 自动跳转到框架页 **技巧**: 使用 JavaScript 检测当前窗口是否为顶级窗口,并自动跳转到指定的框架页面。 ```html <script language="JavaScript"> <!-- if (window == top) { top.location.href = "frames.htm"; // frames.htm 为目标框架页面 } //--> </script> ``` **应用**: 这个技巧可以确保用户直接访问一个应该位于框架内的页面时能够自动跳转到正确的框架结构中。 ### 9. 防止框架嵌套 **技巧**: 使用 JavaScript 来防止当前页面被嵌套在其他框架中。 ```html <script language="JavaScript"> <!-- if (top.location != self.location) { top.location = self.location; } //--> </script> ``` **应用**: 该技巧可以防止其他网站恶意嵌套你的网页内容。 ### 10. 重定向到无 JavaScript 支持的页面 **技巧**: 使用 `<noscript>` 标签为不支持 JavaScript 的用户提供备选页面。 ```html <noscript> <*** src="/*.html">; </***> </noscript> ``` **应用**: 对于不支持 JavaScript 的浏览器或设备,提供一个备用的页面链接。 ### 11. 查看源代码按钮 **技巧**: 使用 JavaScript 修改窗口位置来查看源代码。 ```html <input type="button" value="查看源代码" onclick="window.location = 'view-source:' + 'http://www.pconline.com.cn'"> ``` **应用**: 可以快速查看网页的源代码,适用于开发测试环境。 ### 12. 删除确认提示 **技巧**: 使用 `confirm()` 函数来显示删除确认对话框。 ```html <a href="" onclick="if (confirm('确定要删除吗?')) location='boos.asp?&areyou=删除&page=1'">删除</a> ``` **应用**: 在用户删除数据前增加确认步骤,避免误删。 ### 13. 获取元素的位置 **技巧**: 使用 JavaScript 计算并返回元素相对于页面顶部和左边的距离。 ```html <script language="JavaScript"> function getIE(e) { var t = e.offsetTop; var l = e.offsetLeft; while (e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } alert("top=" + t + "\nleft=" + l); } </script> ``` **应用**: 在需要知道某个元素精确位置的时候非常有用,例如在设计复杂的布局或者交互效果时。 ### 14. 文本框光标定位 **技巧**: 使用 JavaScript 将光标定位到文本框的末尾。 ```html <script language="javascript"> function cc() { var e = event.srcElement; var r = e.createTextRange(); r.moveStart("character", e.value.length); r.collapse(true); r.select(); } </script> <input type="text" name="text1" value="123" onfocus="cc()"> ``` **应用**: 当用户需要在文本框中输入较长的内容时,此技巧可确保光标自动定位到最后一个字符后面。 ### 15. 获取引用页地址 **技巧**: 使用 `document.referrer` 属性获取上一个页面的 URL。 ```html <script> document.referrer </script> ``` **应用**: 通常用于统计来源页面的信息,对网站运营分析非常有帮助。 ### 16. 控制窗口大小 **技巧**: 使用 ActiveX 对象控制窗口大小。 ```html <object id="hh1" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Minimize"> </object> <!-- 其他控制方法略 --> ``` **应用**: 可以让用户控制窗口大小,实现更灵活的交互效果。 以上技巧涵盖了从基本的用户交互到高级的功能实现,每个技巧都有其独特的应用场景。掌握这些技巧可以帮助开发者更好地优化用户体验、增强网站的安全性以及实现更加复杂的交互逻辑。
- 粉丝: 1
- 资源: 6
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助