23、JavaScript 在网页保护与菜单创建中的应用

于 2025-07-11 12:12:39 发布
阅读量53 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript去神秘化：从零开始的编程之旅 文章标签： JavaScript 网页保护 邮件地址隐藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/backprop5master/article/details/149372920

JavaScript 在网页保护与菜单创建中的应用

1. 网页信息保护

1.1 邮件地址隐藏

在网络环境中，我们的网页很容易受到窥探和垃圾邮件机器人的攻击。垃圾邮件机器人会扫描网页代码，寻找可以用于垃圾邮件攻击的电子邮件地址。为了避免这种情况，我们可以通过 JavaScript 来隐藏电子邮件地址。

具体步骤如下：
1. 创建包含部分邮件地址的字符串 ：
- 第一个字符串包含收件人、域名以及一些混淆符号（如 &、 和 _）。
- 第二和第三个字符串包含 “mailto:” 属性名的部分。
- 第四个字符串包含邮件主题。
2. 使用 JavaScript 组装邮件地址 ：使用字符串对象的 replace() 方法将 & 替换为 @， 替换为 .，并移除下划线。
3. 将字符串连接并调用邮件程序 ：将所有字符串连接起来并赋值给变量 b ，然后将 b 赋值给窗口对象的 location 属性，从而调用访客计算机上的邮件程序。

以下是一个示例代码： 

<!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Conceal Email Address</title>
   <script language=JavaScript>
   <!--
      function CreateEmailAddress(){
         var x = 'BobSmith&smith*c_o_m'
         var y = 'mai'
         var z = 'lto'
         var s = '?subject=Customer Inquiry'
         x = x.replace('&','@')
         x = x.replace('*','.')
         x = x.replace('_','')
         x = x.replace('_','')
         var b = y + z +':'+ x + s
         window.location=b
     }
   -->
   </script>
</head>
<body>
   <input  type="button" value="Help"
             onclick="CreateEmailAddress()">
</body>
</html>

1.2 其他保护措施

除了隐藏邮件地址，我们还可以采取以下措施来保护网页信息：
1. 禁用右键菜单 ：防止访客通过右键菜单的“查看源代码”选项查看网页源码。
2. 使用外部 JavaScript 文件 ：将 JavaScript 代码存储在外部文件中，而不是直接写在网页内。
3. 混淆代码 ：对嵌入在网页中的 HTML 代码、JavaScript 和电子邮件地址进行混淆处理。

2. 网页菜单创建

2.1 创建下拉菜单

对于复杂的网站，访客导航可能会成为一个问题。为了解决这个问题，我们可以使用 JavaScript 创建下拉菜单。

以下是创建下拉菜单的步骤：
1. 创建 HTML 选项列表 ：在 <body> 标签中创建一个 HTML 选项列表，例如名为 MenuChoice 的列表。
2. 设置默认选项 ：通过 onload 属性将零索引设置为默认选项。
3. 定义 JavaScript 函数 ：在 <head> 标签中定义一个 JavaScript 函数（如 DisplayPage() ），用于拦截请求并加载所选的网页。
4. 验证请求 ：在加载网页之前，验证所选选项是否有值。

示例代码如下： 

<!DOCTYPE html PUBLIC
     "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Pull Down Menu</title>
   <script language="Javascript" type="text/javascript">
   <!--
      function DisplayPage(Choice) {
         Page = Choice.options[Choice.selectedIndex].value
         if (Page != "") {
            window.location = Page
         }
      }
   -->
   </script>
</head>
<body onload="document.Form1.MenuChoice.selectedIndex=0">
   <form action="" name="Form1">
      <select name="MenuChoice"
             onchange="DisplayPage(this)">
         <option>Products</option>
         <option value="computers.html">Computers</option>
         <option value="monitors.html">Monitors</option>
     </select>
   </form>
</body>
</html>

2.2 动态更改菜单

为了减少网页上的杂乱信息，我们可以使菜单选项具有上下文敏感性，即根据访客的选择动态更改菜单选项。

以下是动态更改菜单的步骤：
1. 定义数组 ：在 JavaScript 中定义包含不同部门员工姓名的数组，例如 SalesStaff 和 MarketingStaff 。
2. 清除当前选项 ：在 GetEmployees() 函数中，清除 Employees 菜单的当前选项。
3. 根据选择更新选项 ：根据访客选择的部门，将相应的员工姓名数组中的元素添加到 Employees 菜单中。

示例代码如下： 

<!DOCTYPE html PUBLIC
              "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/2000/REC-xhtml1-
            20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Dynamically Changing Menu Options</title>
   <script language="Javascript" type="text/javascript">
   <!--
      SalesStaff = new Array('Bob Smith','Mark Jones',
                 'Sue Rogers')
      MarketingStaff = new Array('Amber Thomas',
             'Joanne Johnson', 'Sandy Russell')
      function GetEmployees(Department) {
         // clear out the current options
         for(i=document.Form1.Employees.options.length-1;
               i>0; i--)
         {
            document.Form1.Employees.options.remove(i)
         }
         Dept = Department.options[
                     Department.selectedIndex].value
         if (Dept != "") {
            if (Dept == '1'){
               for (i=1; i<=SalesStaff.length;i++) {
                  document.Form1.Employees.options[i] =
                       new Option(SalesStaff[i-1])
               }
            }
            if (Dept  == '2'){
               for (i=1; i<=MarketingStaff.length;i++) {
                  document.Form1.Employees.options[i] =
                       new Option(MarketingStaff[i-1])
               }
            }
        }
      }
    -->
    </script>
</head>
<body  onload="document.Form1.DeptList.selectedIndex=0">
   <form action="MyCGI.cgi" name="Form1">
      <select name="DeptList" onchange="GetEmployees(this)">
         <option value="0">Department</option>
         <option value="1">Sales</option>
         <option value="2">Marketing</option>
      </select>
      <select name="Employees">
         <option value="0">Employees</option>
      </select>
      <br>
      <p>
         <input type="submit" value="Submit" />
         <input type="reset" />
      </p>
    </form>
</body>
</html>

2.3 验证菜单选择

在使用菜单收集访客信息时，访客可能会在提交表单之前未选择菜单项，这可能会导致表单处理出现问题。我们可以使用 JavaScript 来验证菜单选择。

具体步骤如下：
1. 创建下拉菜单 ：在 <body> 标签中创建一个下拉菜单，例如包含总统候选人的菜单。
2. 定义验证函数 ：在 <head> 标签中定义一个名为 ValidateForm() 的 JavaScript 函数，用于验证表单提交。
3. 设置表单提交条件 ：将 ValidateForm() 函数的返回值赋给 <form> 标签的 onsubmit 属性。如果返回 true ，则提交表单；否则，不提交表单。

示例代码如下： 

<!DOCTYPE html PUBLIC
             "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Validate A Menu Selection</title>
   <script language="Javascript" type="text/javascript">
   <!--
      function ValidateForm(ValForm) {
         Vote = ValForm.Candidate.selectedIndex
         if (ValForm.Candidate.options[Vote].value == "") {
            alert('Please select a candidate.')
            return false
         }
         return true
      }
    -->
    </script>
</head>
<body>
   <form onsubmit="return ValidateForm(this)"
                 action="MyCGI.cgi" name="Form1">
      <select name="Candidate">
         <option value="" Vote for President</option>
         <option value="0">Amber Thomas</option>
         <option value="1">Joanne Adams</option>
         <option value="2">Sandy Rogers</option>
         <option value="3">Sue Smith</option>
         <option value="4">Tom Paine</option>
      </select>
      <br>
      <p>
         <input type="submit" value="Submit" />
         <input type="reset" />
      </p>
   </form>
</body>
</html>

2.4 创建 DHTML 菜单

一些顶级商业网站上令人惊叹的菜单是使用动态 HTML（DHTML）构建的。DHTML 是 HTML、层叠样式表（CSS）和 JavaScript 的组合，它可以帮助我们创建出优雅的菜单，例如在网页中“浮动”的菜单。

虽然这里没有列出 DHTML 菜单的代码，但我们可以了解到，DHTML 能够让我们创建出更具交互性和视觉效果的菜单。

3. 总结

通过 JavaScript，我们可以在网页保护和菜单创建方面采取有效的措施。在网页保护方面，我们可以隐藏电子邮件地址、禁用右键菜单和使用外部 JavaScript 文件来保护网页信息。在菜单创建方面，我们可以创建下拉菜单、动态更改菜单选项、验证菜单选择以及使用 DHTML 创建更高级的菜单。这些技术可以提高网页的安全性和用户体验。

以下是一个简单的流程图，展示了创建下拉菜单的基本流程： 

graph TD;
    A[创建 HTML 选项列表] --> B[设置默认选项];
    B --> C[定义 JavaScript 函数];
    C --> D[验证请求];
    D --> E[加载所选网页];

同时，我们还可以通过表格来总结不同保护措施和菜单创建方法的特点：
| 技术 | 特点 |
| ---- | ---- |
| 隐藏邮件地址 | 防止垃圾邮件机器人获取邮件地址 |
| 禁用右键菜单 | 阻止访客查看网页源码 |
| 使用外部 JavaScript 文件 | 提高代码的可维护性和安全性 |
| 创建下拉菜单 | 简化复杂网站的导航 |
| 动态更改菜单 | 减少网页杂乱信息 |
| 验证菜单选择 | 确保表单提交的有效性 |
| 创建 DHTML 菜单 | 增加网页的交互性和视觉效果 |

4. 技术细节分析

4.1 邮件地址隐藏技术分析

隐藏邮件地址的核心在于混淆垃圾邮件机器人的识别逻辑。通过使用特殊符号（如 &、* 和 _）来替代 @ 和 .，可以有效地防止机器人直接识别邮件地址。以下是对隐藏邮件地址代码的详细分析： 

<!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Conceal Email Address</title>
   <script language=JavaScript>
   <!--
      function CreateEmailAddress(){
         var x = 'BobSmith&smith*c_o_m'
         var y = 'mai'
         var z = 'lto'
         var s = '?subject=Customer Inquiry'
         x = x.replace('&','@')
         x = x.replace('*','.')
         x = x.replace('_','')
         x = x.replace('_','')
         var b = y + z +':'+ x + s
         window.location=b
     }
   -->
   </script>
</head>
<body>
   <input  type="button" value="Help"
             onclick="CreateEmailAddress()">
</body>
</html>
  • 变量定义 ：
    • x 包含了混淆后的邮件地址。
    • y 和 z 分别是 mailto: 属性名的部分。
    • s 是邮件的主题。
  • 字符串替换 ：
    • 使用 replace() 方法将 & 替换为 @，* 替换为 .，并移除下划线。
  • 地址组装 ：
    • 将所有字符串连接起来，形成完整的邮件地址和主题。
  • 调用邮件程序 ：
    • 通过 window.location 属性调用访客计算机上的邮件程序。

4.2 下拉菜单技术分析

下拉菜单的创建主要涉及 HTML 选项列表和 JavaScript 函数的结合。以下是对下拉菜单代码的详细分析： 

<!DOCTYPE html PUBLIC
     "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Pull Down Menu</title>
   <script language="Javascript" type="text/javascript">
   <!--
      function DisplayPage(Choice) {
         Page = Choice.options[Choice.selectedIndex].value
         if (Page != "") {
            window.location = Page
         }
      }
   -->
   </script>
</head>
<body onload="document.Form1.MenuChoice.selectedIndex=0">
   <form action="" name="Form1">
      <select name="MenuChoice"
             onchange="DisplayPage(this)">
         <option>Products</option>
         <option value="computers.html">Computers</option>
         <option value="monitors.html">Monitors</option>
     </select>
   </form>
</body>
</html>
  • HTML 选项列表 ：
    • 在 <body> 标签中创建了一个名为 MenuChoice 的下拉菜单。
  • 默认选项设置 ：
    • 通过 onload 属性将零索引设置为默认选项。
  • JavaScript 函数 ：
    • DisplayPage() 函数用于拦截请求并加载所选的网页。
    • 通过 selectedIndex 属性获取所选选项的索引，进而获取其值。
  • 请求验证 ：
    • 在加载网页之前，验证所选选项的值是否为空。

4.3 动态更改菜单技术分析

动态更改菜单的关键在于根据访客的选择动态更新菜单选项。以下是对动态更改菜单代码的详细分析： 

<!DOCTYPE html PUBLIC
              "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/2000/REC-xhtml1-
            20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Dynamically Changing Menu Options</title>
   <script language="Javascript" type="text/javascript">
   <!--
      SalesStaff = new Array('Bob Smith','Mark Jones',
                 'Sue Rogers')
      MarketingStaff = new Array('Amber Thomas',
             'Joanne Johnson', 'Sandy Russell')
      function GetEmployees(Department) {
         // clear out the current options
         for(i=document.Form1.Employees.options.length-1;
               i>0; i--)
         {
            document.Form1.Employees.options.remove(i)
         }
         Dept = Department.options[
                     Department.selectedIndex].value
         if (Dept != "") {
            if (Dept == '1'){
               for (i=1; i<=SalesStaff.length;i++) {
                  document.Form1.Employees.options[i] =
                       new Option(SalesStaff[i-1])
               }
            }
            if (Dept  == '2'){
               for (i=1; i<=MarketingStaff.length;i++) {
                  document.Form1.Employees.options[i] =
                       new Option(MarketingStaff[i-1])
               }
            }
        }
      }
    -->
    </script>
</head>
<body  onload="document.Form1.DeptList.selectedIndex=0">
   <form action="MyCGI.cgi" name="Form1">
      <select name="DeptList" onchange="GetEmployees(this)">
         <option value="0">Department</option>
         <option value="1">Sales</option>
         <option value="2">Marketing</option>
      </select>
      <select name="Employees">
         <option value="0">Employees</option>
      </select>
      <br>
      <p>
         <input type="submit" value="Submit" />
         <input type="reset" />
      </p>
    </form>
</body>
</html>
  • 数组定义 ：
    • 定义了 SalesStaff 和 MarketingStaff 两个数组，分别存储销售部门和市场部门的员工姓名。
  • 清除当前选项 ：
    • 在 GetEmployees() 函数中，使用 remove() 方法清除 Employees 菜单的当前选项。
  • 选项更新 ：
    • 根据访客选择的部门，将相应数组中的元素添加到 Employees 菜单中。

4.4 验证菜单选择技术分析

验证菜单选择的目的是确保表单提交的有效性。以下是对验证菜单选择代码的详细分析： 

<!DOCTYPE html PUBLIC
             "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Validate A Menu Selection</title>
   <script language="Javascript" type="text/javascript">
   <!--
      function ValidateForm(ValForm) {
         Vote = ValForm.Candidate.selectedIndex
         if (ValForm.Candidate.options[Vote].value == "") {
            alert('Please select a candidate.')
            return false
         }
         return true
      }
    -->
    </script>
</head>
<body>
   <form onsubmit="return ValidateForm(this)"
                 action="MyCGI.cgi" name="Form1">
      <select name="Candidate">
         <option value="" Vote for President</option>
         <option value="0">Amber Thomas</option>
         <option value="1">Joanne Adams</option>
         <option value="2">Sandy Rogers</option>
         <option value="3">Sue Smith</option>
         <option value="4">Tom Paine</option>
      </select>
      <br>
      <p>
         <input type="submit" value="Submit" />
         <input type="reset" />
      </p>
   </form>
</body>
</html>
  • 获取所选选项索引 ：
    • 通过 selectedIndex 属性获取所选选项的索引。
  • 验证选项值 ：
    • 检查所选选项的值是否为空，如果为空则弹出提示框并返回 false 。
  • 表单提交控制 ：
    • 将 ValidateForm() 函数的返回值赋给 <form> 标签的 onsubmit 属性，控制表单的提交。

5. 实际应用建议

5.1 网页保护方面

  • 综合使用多种保护措施 ：不要仅仅依赖一种保护措施，而是将隐藏邮件地址、禁用右键菜单和使用外部 JavaScript 文件等方法结合起来，以提高网页的安全性。
  • 定期更新保护策略 ：随着垃圾邮件机器人和黑客技术的不断发展，定期检查和更新保护策略，确保网页信息的安全。

5.2 菜单创建方面

  • 根据网站需求选择合适的菜单类型 ：如果网站结构复杂，可优先考虑创建下拉菜单；如果需要根据用户选择动态展示信息，可使用动态更改菜单。
  • 注重用户体验 ：在创建菜单时，要考虑菜单的布局和交互性，确保用户能够轻松找到所需信息。

6. 总结与展望

6.1 总结

通过对 JavaScript 在网页保护和菜单创建方面的应用进行深入分析，我们了解到 JavaScript 可以为网页开发带来诸多优势。在网页保护方面，我们可以有效地防止垃圾邮件机器人的攻击和访客的非法访问；在菜单创建方面，我们可以创建出更加友好和高效的用户界面。

6.2 展望

随着互联网技术的不断发展，JavaScript 的应用场景将会越来越广泛。未来，我们可以期待更多创新的网页保护和菜单创建技术的出现，为用户带来更好的网页体验。

以下是一个流程图，展示了动态更改菜单的基本流程： 

graph TD;
    A[访客选择部门] --> B[调用 GetEmployees() 函数];
    B --> C[清除当前选项];
    C --> D[获取所选部门的值];
    D --> E{部门值是否为空};
    E -- 否 --> F{部门值是否为 1};
    F -- 是 --> G[添加销售部门员工选项];
    F -- 否 --> H{部门值是否为 2};
    H -- 是 --> I[添加市场部门员工选项];
    E -- 是 --> J[不做处理];

同时，我们可以通过表格来总结不同技术的应用场景：
| 技术 | 应用场景 |
| ---- | ---- |
| 隐藏邮件地址 | 所有需要保护邮件地址的网页 |
| 禁用右键菜单 | 对网页源码保护要求较高的网页 |
| 使用外部 JavaScript 文件 | 大型网站或需要多人协作开发的项目 |
| 创建下拉菜单 | 网站结构复杂，需要简化导航的网页 |
| 动态更改菜单 | 需要根据用户选择动态展示信息的网页 |
| 验证菜单选择 | 涉及表单提交，需要确保数据有效性的网页 |
| 创建 DHTML 菜单 | 追求高交互性和视觉效果的商业网站 |

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值