构建可持久化全局图片内容显示的动态控制系统-js教程-PHP中文网

构建可持久化全局图片内容显示的动态控制系统

本教程详细介绍如何通过JavaScript、CSS和Cookie实现网站全局内容的动态控制与状态持久化。我们将学习如何利用<body>元素上的类名来切换页面元素的显示状态（例如，移除图片上的覆盖层），并通过Cookie确保用户选择在页面刷新或浏览器会话结束后依然有效。这种方法提供了一种灵活且可维护的解决方案，适用于需要用户授权才能显示特定内容的场景。

引言：动态内容控制与持久化的挑战

在现代网页设计中，经常需要根据用户交互或特定条件动态地显示或隐藏页面上的某些内容。一个典型的场景是，为了遵守法规或提供更好的用户体验，需要对某些内容（如成人内容、敏感图片）进行遮盖，直到用户明确同意查看。当用户点击一个按钮表示同意后，网站应移除所有相关遮盖，并确保这一选择在用户浏览其他页面或下次访问时依然有效。

传统的做法可能尝试直接通过JavaScript操作CSS规则，例如使用document.styleSheets[0].cssRules[0].style.removeProperty('content')。然而，这种方法存在诸多局限性：它依赖于CSS规则的特定顺序和索引，不够健壮；更重要的是，它无法在页面刷新后保留用户的选择，导致每次访问都需要重新操作。本教程将介绍一种更优雅、更健壮且支持状态持久化的解决方案。

核心思路：基于类名的全局样式控制

为了实现灵活且易于维护的全局内容控制，我们不直接修改CSS属性，而是通过在<body>元素上添加或移除一个特定的CSS类来间接控制样式。这种方法有以下几个显著优点：

解耦与可维护性： JavaScript负责管理<body>上的类名，而CSS则根据这个类名的存在与否来定义不同的样式。这使得样式和行为逻辑分离，提高了代码的可读性和可维护性。
全局影响： 由于<body>是整个文档的根元素，在其上添加的类名可以影响到页面上的任何子元素，从而轻松实现全局性的样式切换。
灵活性： 我们可以定义多种状态对应的类名，实现更复杂的动态效果。

CSS实现：条件性应用内容覆盖

我们的目标是当用户未授权时，图片显示一个覆盖层；当用户授权后，覆盖层消失，显示原始图片。这可以通过body:not(.permitted)选择器来实现。

/* 当<body>元素没有'permitted'类时，对所有图片应用内容覆盖 */
body:not(.permitted) img {
  /* 使用content属性为图片添加一个覆盖层图片 */
  content: url("https://static.vecteezy.com/system/resources/previews/005/476/277/original/under-18-forbidden-round-icon-sign-illustration-eighteen-or-older-persons-adult-content-18-plus-only-rating-isolated-on-white-background-free-vector.jpg");
  max-width: 100%;
  height: auto;
  /* 确保覆盖层图片能够完全显示 */
}

登录后复制

在上述CSS代码中：

body:not(.permitted) img选择器意味着，只有当<body>元素上没有名为permitted的类时，其内部的<img>元素才会应用content属性定义的覆盖图片。
content属性在这里被巧妙地用来在图片上方显示一个警告图标，而不是图片本身。当permitted类被添加到<body>上时，这个CSS规则将不再匹配，content属性定义的覆盖层自然消失，原始的src图片就会显示出来。

JavaScript实现：用户交互与状态持久化

JavaScript负责处理用户交互（点击按钮）和确保用户选择的状态在页面刷新后依然有效。这需要用到Cookie来持久化状态。

1. 用户操作触发：添加permitted类

当用户点击按钮时，我们需要执行一个函数来将permitted类添加到<body>元素上。

function myFunction() {
  document.body.classList.add('permitted');
  // 同时，将用户的选择存储到Cookie中，以便下次访问时恢复状态
  setCookie('permitted-images', '1');
}

登录后复制

2. Cookie管理函数

为了实现状态持久化，我们需要一些辅助函数来设置和获取Cookie。这些函数可以被复用。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

/**
 * 设置Cookie
 * @param {string} name Cookie的名称
 * @param {string} value Cookie的值
 * @param {number} days Cookie的过期天数（可选）
 */
function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

/**
 * 获取Cookie
 * @param {string} name Cookie的名称
 * @returns {string|null} Cookie的值，如果不存在则返回null
 */
function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

登录后复制

3. 页面加载时恢复状态

为了在页面加载时恢复用户之前的选择，我们需要在DOM内容完全加载后检查Cookie。

document.addEventListener('DOMContentLoaded', function() {
  // 检查是否存在名为'permitted-images'且值为'1'的Cookie
  if (getCookie('permitted-images') === '1') {
    // 如果存在，说明用户之前已同意，则将'permitted'类添加到<body>
    document.body.classList.add('permitted');
  }
});

登录后复制

DOMContentLoaded事件确保了在执行DOM操作之前，HTML文档已经被完全加载和解析。

整合：完整的解决方案

现在，我们将HTML、CSS和JavaScript代码整合起来，形成一个完整的可运行示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态内容显示与持久化</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        /* 默认情况下，当<body>没有'permitted'类时，对图片应用覆盖层 */
        body:not(.permitted) img {
            content: url("https://static.vecteezy.com/system/resources/previews/005/476/277/original/under-18-forbidden-round-icon-sign-illustration-eighteen-or-older-persons-adult-content-18-plus-only-rating-isolated-on-white-background-free-vector.jpg");
            max-width: 100%; /* 确保覆盖层图片适应容器 */
            height: auto;
            display: block; /* 确保覆盖层作为块级元素显示 */
        }

        /* 原始图片样式，确保它们在覆盖层消失后能正常显示 */
        img {
            max-width: 300px;
            height: auto;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            display: block; /* 确保图片独占一行 */
        }

        button {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h1>图片内容动态显示示例</h1>
    <button onclick="myFunction()">显示图片</button>

    <p>以下图片在未授权时会被覆盖：</p>
    <img src="https://m.media-amazon.com/images/I/81K2hJBAduL.png" alt="示例图片1">
    <img src="https://cdn.pixabay.com/photo/2023/04/02/12/40/mistletoe-7894574_1280.jpg" alt="示例图片2">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/21/59/tree-736877_1280.jpg" alt="示例图片3">

    <script>
        /**
         * 设置Cookie
         * @param {string} name Cookie的名称
         * @param {string} value Cookie的值
         * @param {number} days Cookie的过期天数（可选）
         */
        function setCookie(name, value, days) {
            let expires = "";
            if (days) {
                const date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        }

        /**
         * 获取Cookie
         * @param {string} name Cookie的名称
         * @returns {string|null} Cookie的值，如果不存在则返回null
         */
        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        // 用户点击按钮时执行的函数
        function myFunction() {
            document.body.classList.add('permitted'); // 添加类名以显示图片
            setCookie('permitted-images', '1', 30); // 设置Cookie，30天后过期
            console.log("图片已显示，状态已保存到Cookie。");
        }

        // 页面加载时检查Cookie，恢复用户选择的状态
        document.addEventListener('DOMContentLoaded', function() {
            if (getCookie('permitted-images') === '1') {
                document.body.classList.add('permitted');
                console.log("从Cookie恢复状态：图片已显示。");
            } else {
                console.log("Cookie中未找到许可信息，图片处于覆盖状态。");
            }
        });
    </script>
</body>
</html>

登录后复制

在上述示例中，点击“显示图片”按钮后，所有被body:not(.permitted) img规则影响的图片都会显示其真实的src内容。同时，一个名为permitted-images的Cookie会被设置，其值设为1，并默认设置为30天后过期。这意味着，在接下来的30天内，无论用户刷新页面、关闭浏览器再打开，或者访问网站的其他页面，图片都将直接显示而不会被覆盖。

注意事项与最佳实践

Cookie过期时间： 在setCookie函数中，days参数决定了Cookie的生命周期。如果未指定，Cookie通常在浏览器会话结束时（即关闭浏览器）失效。通过setCookie('permitted-images', '1', 30)，我们将Cookie设置为30天后过期，以提供更长的持久化体验。根据需求调整此值。
测试环境限制： 在某些在线代码沙盒（如StackOverflow的代码片段）中，由于安全策略，Cookie可能无法正常工作。建议在本地环境中（如通过Live Server插件）进行测试以验证Cookie的持久化功能。
替代持久化方案： 除了Cookie，localStorage和sessionStorage也是Web存储的选项。
- localStorage：数据永久存储，除非用户手动清除。适用于需要更长久持久化的场景。
- sessionStorage：数据仅在当前浏览器会话中有效，关闭标签页或浏览器后数据即清除。适用于仅需会话级持久化的场景。选择哪种方案取决于具体需求。对于本教程的场景，Cookie是一个合适的选择，因为它可以在不同子域和路径间共享，并且有明确的过期机制。
可访问性（Accessibility）： 对于需要内容授权的场景，应考虑为视觉障碍用户提供替代的文本说明或通过ARIA属性告知内容状态。确保在覆盖层存在时，用户仍然可以理解图片被隐藏的原因。
性能考量： 虽然本方法对性能影响很小，但应避免在关键渲染路径上执行过于复杂的JavaScript逻辑，尤其是在DOMContentLoaded事件中。保持代码简洁高效。
安全性： 在处理用户敏感内容时，务必确保服务器端也进行相应的验证和授权，前端的控制仅作为用户体验的一部分，不能作为唯一的安全屏障。

总结

通过巧妙地结合CSS的content属性、<body>元素上的类名以及JavaScript的Cookie管理，我们构建了一个高效且可持久化的动态内容显示系统。这种方法不仅解决了直接操作CSS规则的局限性，还提供了良好的用户体验，确保用户的一次选择能在整个网站会话甚至更长时间内生效。掌握这种模式，可以帮助开发者更好地管理和控制网页内容的显示逻辑。

以上就是构建可持久化全局图片内容显示的动态控制系统的详细内容，更多请关注php中文网其它相关文章！