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

需积分: 1 39 浏览量 2012-09-17 22:50:00 上传评论收藏 186KB PDF 举报

### JavaScript常用技巧详解在网页开发领域，JavaScript作为前端开发的核心语言之一，其灵活与强大功能使其成为构建交互式网站的必备技能。以下是从“JavaScript常用55个技巧”中精选出的部分技巧，旨在帮助开发者提升网页开发效率及用户体验。 #### 1. 屏蔽鼠标右键与上下文菜单通过`oncontextmenu`事件处理器，可以阻止默认的右键菜单显示。例如： ```html <body oncontextmenu="window.event.returnValue=false"> ``` 或者针对表格元素： ```html <table border oncontextmenu="return false;"> ``` 这在保护网页内容不被轻易复制时非常有用。 #### 2. 取消文本选择与复制使用`onselectstart`属性，可以防止用户选中文本： ```html <body onselectstart="return false"> ``` 结合`oncopy`和`oncut`事件，进一步禁止复制和剪切操作： ```html <body oncopy="return false;" oncut="return false;"> ``` #### 3. 自定义浏览器图标在`<head>`部分加入以下代码，可以替换浏览器地址栏前的默认图标： ```html <link rel="Shortcut Icon" href="favicon.ico"> ``` 为了在收藏夹中也显示自定义图标，可以使用： ```html <link rel="Bookmark" href="favicon.ico"> ``` #### 4. 关闭IME输入法对于需要控制输入环境的场景，如密码输入框，可以使用： ```html <input style="ime-mode:disabled"> ``` 这会禁用输入法编辑器，确保输入的安全性。 #### 5. 强制页面以框架形式打开若希望页面只能在特定框架内加载，可使用以下脚本： ```javascript <script language="JavaScript"> if (window == top) top.location.href = "frames.htm"; </script> ``` 其中，“frames.htm”应替换为你设定的框架页面路径。 #### 6. 防止被框架嵌套为了防止其他网站在框架内加载你的页面，可以使用以下脚本： ```javascript <SCRIPT LANGUAGE=JAVASCRIPT> if (top.location != self.location) top.location = self.location; </SCRIPT> ``` 这确保了页面只能在它自己或预期的环境中加载。 #### 7. 禁止“另存为” 通过`<noscript>`标签，可以实现对“另存为”功能的限制： ```html <noscript>  <*** src="/*.html>"; </***> </noscript> ``` 然而，此方法有局限性，因为依赖于浏览器对`<noscript>`的处理方式。 #### 8. 查看源代码按钮创建一个按钮，点击后可以直接查看当前页面的源代码： ```html <input type="button" value="查看网页源代码" onclick="window.location='view-source:' + window.location.href"> ``` 这为用户提供了一种便捷的源代码查看方式。 #### 9. 删除操作确认在进行删除等敏感操作前，增加确认步骤： ```html <a href="" onclick="return confirm('确实要删除吗?') ? 'boos.asp?&areyou=删除&page=1' : false">删除</a> ``` 这提高了用户操作的安全性和准确性。 #### 10. 获取控件的绝对位置为了获取HTML元素在页面上的精确坐标，可以使用以下脚本： ```javascript <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> ``` 这对于动态调整布局或元素定位非常有用。 #### 11. 光标定位到文本框末尾为了让光标自动定位到文本框中的文本末尾，可以使用： ```javascript <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()"> ``` 这提升了用户体验，特别是在需要频繁输入的场景下。 #### 12. 上一页来源判断通过`document.referrer`属性，可以获取上一页面的URL，用于分析用户行为或进行定向广告展示。 #### 13. 控制窗口状态利用ActiveX控件，可以实现窗口的最小化、最大化和关闭操作： ```html <object id="hh1" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Minimize"> </object> <object id="hh2" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Maximize"> </object> ``` 然而，这些功能的可用性受限于浏览器安全设置和兼容性。以上技巧仅为JavaScript强大功能的一小部分，它们不仅能够增强网页的互动性，还能够提升安全性与用户体验。掌握这些技巧，将有助于开发者在实际项目中更加高效地解决问题。

资源推荐

资源详情

资源评论