83. 控制请求来源的HTML Meta标签 - Referrer详解

在Web开发中,为了保护用户隐私安全控制请求的来源信息至关重要的。HTML中的&lt;meta&gt;标签提供了一种简单有效方式控制请求的来源,其中包括Referrer(引荐者)相关设置本文详细介绍<meta&gt;标签中的Referrer属性,并提供代码示例演示用法

什么是Referrer属性

Referrer属性用于控制HTTP请求中的Referrer信息,即请求的来源URL。通过设置Referrer属性我们可以决定是否发送Referrer头以及如何发送Referrer头信息

Referrer属性使用

Referrer属性可以通过<meta&gt;标签中的referrerpolicy属性进行设置referrerpolicy属性有以下几个取值

示例代码

以下是一个示例代码演示如何在HTML中使用<meta&gt;标签控制Referrer属性:

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
  <meta name="referrer" content="no-referrer">
  <!-- 或者 -->
  <meta name="referrer" content="origin">
  <!-- 或者其他可选值 -->
  
  <!-- 页面的其他内容 -->
</head>
<body>
  <!-- 页面主体内容 -->
</body>
</html>

上述代码中,通过设置<meta>标签的referrer属性,我们可以选择是否发送Referrer头信息,并确定发送的Referrer信息的详细程度。

注意事项

总结:Referrer属性是HTML中<meta>标签的一项重要功能用于控制HTTP请求的来源信息。通过设置Referrer属性,我们可以选择是否发送Referrer头以及发送的Referrer信息的详细程度,以保护用户隐私和系统的安全。在实际应用中,合理设置Referrer属性可以根据具体需求保护用户隐私和确保系统的安全。

每日一游 – 大富翁小游戏

大富翁

<!DOCTYPE html>
<html>
<head>
  <title>大富翁小游戏</title>
  <style>
    body {
      text-align: center;
    }
    #game-area {
      position: relative;
      width: 400px;
      height: 800px;
      border: 1px solid gray;
      overflow: hidden;
      margin: 0 auto;
    }
    #basket {
      width: 100px;
      height: 100px;
      position: absolute;
      bottom: 0;
      left: calc(50% - 50px);
      background: url("../img/jbp.jpg") no-repeat;
      background-size: contain;
    }


    .fruit {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: url("../img/yuanbao.jpg") no-repeat;
      background-size: contain;
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>大富翁小游戏</h1>
  <div id="game-area">
    <div id="basket"></div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    var score = 0;
    var speed = 5;
    var fruitInterval;
    var gameArea = {
      width: $("#game-area").width(),
      height: $("#game-area").height()
    };

    function startGame() {
      $("#basket").css("left", gameArea.width / 2 - 50);
      $(document).keydown(function (e) {
        if (e.keyCode == 37) {
          moveLeft();
        } else if (e.keyCode == 39) {
          moveRight();
        }
      });

      fruitInterval = setInterval(function () {
        var fruit = $("<div class='fruit'></div>");
        fruit.css({
          left: Math.random() * (gameArea.width - 50),
          top: -50
        });
        $("#game-area").append(fruit);
        fruit.animate({ top: gameArea.height + 50 }, speed * 1000, function () {
          $(this).remove();
        });
      }, 1000);

      setInterval(checkCollision, 100);
    }

    function moveLeft() {
      var basketPos = $("#basket").position().left;
      if (basketPos > 0) {
        $("#basket").css("left", basketPos - 50);
      }
    }

    function moveRight() {
      var basketPos = $("#basket").position().left;
      if (basketPos < gameArea.width - 100) {
        $("#basket").css("left", basketPos + 50);
      }
    }

    function checkCollision() {
      $(".fruit").each(function () {
        var fruitPos = $(this).position();
        var basketPos = $("#basket").position();

        if (
          fruitPos.top + 50 >= basketPos.top &amp;&amp;
          fruitPos.top + 50 <= basketPos.top + 100 &amp;&amp;
          fruitPos.left >= basketPos.left &amp;&amp;
          fruitPos.left <= basketPos.left + 100
        ) {
          $(this).remove();
          score++;
          $("#score").text("Score: " + score);
        }
      });
    }

    $(document).ready(function () {
      startGame();
    });
  </script>
  <h2 id="score">Score: 0</h2>
</body>
</html>

原文地址:https://blog.csdn.net/weixin_42560424/article/details/131419907

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_38814.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注