Javascript中最常用的55个经典技巧

### JavaScript中最常用的55个经典技巧详解 #### 技巧5：自定义浏览器图标 - **功能描述**：通过设置`<link>`标签中的`Shortcut Icon`和`Bookmark`属性，可以让网站在浏览器地址栏以及用户的收藏夹中显示自定义图标。 - **实现方式**： ```html <link rel="Shortcut Icon" href="favicon.ico"> <link rel="Bookmark" href="favicon.ico"> ``` - **注意事项**：确保`favicon.ico`文件放置于网站根目录下。 #### 技巧6：禁用输入法 - **功能描述**：通过CSS属性`ime-mode`来关闭输入法。 - **实现方式**： ```html <input style="ime-mode:disabled"> ``` - **注意事项**：此属性仅对部分浏览器有效，如需更广泛的兼容性，可考虑使用JavaScript替代方案。 #### 技巧7：保持页面始终处于框架内 - **功能描述**：确保当前页面总是在一个指定的框架中打开。 - **实现方式**： ```html <script language="JavaScript"><!-- if (window == top) { top.location.href = "frames.htm"; // frames.htm为框架网页 } //--></script> ``` - **注意事项**：确保`frames.htm`文件正确存在并配置了相应的框架结构。 #### 技巧8：防止页面被框架加载 - **功能描述**：防止当前页面被其他站点的框架加载。 - **实现方式**： ```html <script language="JavaScript"><!-- if (top.location != self.location) { top.location = self.location; } //--></script> ``` - **注意事项**：该方法适用于防止恶意站点嵌套您的页面。 #### 技巧9：禁止保存网页 - **功能描述**：通过隐藏“另存为”按钮，阻止用户直接保存网页。 - **实现方式**： ```html <noscript><iframe src="/*.html"></iframe></noscript> ``` - **注意事项**：这种方法只能在一定程度上阻止直接保存，无法完全阻止。 #### 技巧10：查看网页源代码 - **功能描述**：提供一个按钮让用户可以查看网页源代码。 - **实现方式**： ```html <input type="button" value="查看网页源代码" onclick="window.location='view-source:' + 'http://www.pconline.com.cn'"> ``` - **注意事项**：用户可以通过浏览器菜单直接访问源代码，此技巧主要用于演示。 #### 技巧11：删除操作确认 - **功能描述**：在执行删除操作前弹出确认对话框。 - **实现方式**： ```html <a href="javascript:if (confirm('确实要删除吗?')) location='boos.asp?&areyou=删除&page=1'">删除</a> ``` - **注意事项**：此方法增加了用户体验，但可以通过浏览器开发者工具绕过。 #### 技巧12：获取控件的绝对位置 - **功能描述**：获取HTML元素在页面上的绝对位置坐标。 - **实现方式**： ```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> ``` - **注意事项**：适用于所有现代浏览器。 #### 技巧13：设置文本框光标位置 - **功能描述**：当文本框获得焦点时，光标自动定位到最后一个字符后面。 - **实现方式**： ```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()"> ``` - **注意事项**：适用于IE浏览器，其他浏览器可能需要使用不同的方法。 #### 技巧14：获取上一页URL - **功能描述**：获取用户上一个访问的页面URL。 - **实现方式**： ```javascript document.referrer ``` - **注意事项**：此属性返回的是字符串形式的URL。 #### 技巧15：窗口控制（最小化、最大化、关闭） - **功能描述**：通过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> <OBJECT id="hh3" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <PARAM NAME="Command" VALUE="Close"> </OBJECT> <input type="button" value="最小化" onclick="hh1.Click()"> <input type="button" value="最大化" onclick="hh2.Click()"> <input type="button" value="关闭" onclick="hh3.Click()"> ``` - **注意事项**：这些操作仅在IE浏览器中可用，并且可能受到安全限制的影响。 以上技巧覆盖了从UI交互到安全性增强等多个方面，为开发人员提供了丰富的工具箱。需要注意的是，在实际应用中，应当根据具体环境选择合适的方法，并充分考虑兼容性和安全性问题。