如何制作可跳转至Google Sites隐藏页面的HTML员工登录页？

看起来你遇到的核心问题是原模板里的action="login.php"——Google Sites不支持运行PHP这类服务器端脚本，所以才会出现"invalid resource"错误。既然你是想跳转到导航栏隐藏的内部页面，我们可以把登录验证完全放在前端完成，然后直接跳转，不需要依赖服务器端脚本。

修改后的代码示例 #

<head>
    <title>员工登录专区</title>
    <style>
        /* 可以加一点样式让页面更贴合Google Sites风格 */
        .login-container {
            width: 300px;
            margin: 50px auto;
            background-color: #0099CC;
            padding: 20px;
            border-radius: 8px;
            color: white;
        }
        .login-row {
            margin: 15px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .login-btn {
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form name="loginForm" onsubmit="return check(this)">
        <div class="login-container">
            <h3 style="text-align:center;">员工会员专区登录</h3>
            <div class="login-row">
                <label>用户名:</label>
                <input type="text" name="userid" required>
            </div>
            <div class="login-row">
                <label>密码:</label>
                <input type="password" name="pwd" required>
            </div>
            <div class="login-row" style="justify-content:flex-end;">
                <input type="reset" class="login-btn">
                <input type="submit" class="login-btn" value="登录">
            </div>
        </div>
    </form>

    <script>
        function check(form) {
            // 替换成你实际的员工账号密码
            const validUsername = "你的员工用户名";
            const validPassword = "对应的密码";

            if(form.userid.value === validUsername && form.pwd.value === validPassword) {
                // 替换成你Google Sites里隐藏页面的完整URL
                window.location.href = "https://sites.google.com/你的域名/你的站点/隐藏页面路径";
                return false; // 阻止表单默认提交行为
            } else {
                alert("用户名或密码错误，请重试");
                return false;
            }
        }
    </script>
</body>
</html>

关键修改点说明 #

• 移除PHP依赖：删掉了action="login.php"，因为Google Sites不支持服务器端脚本，所有验证和跳转都用JavaScript完成。
• 前端跳转逻辑：验证通过后用window.location.href直接跳转到你的隐藏页面URL，记得把示例里的URL换成你实际的页面地址。
• 表单行为控制：给form加了onsubmit="return check(this)"，并且在check函数里返回false，阻止表单的默认提交行为，避免不必要的页面刷新。
• 优化样式：加了基础的CSS样式，让登录页更美观，你可以根据Google Sites的主题调整颜色和布局。

额外注意事项 #

• 隐藏页面权限：确保你Google Sites里的隐藏页面已经设置了正确的权限（比如只允许特定员工账号访问），不然即使跳转过去，没有权限的用户还是会被拦截。
• 账号密码安全性：这种前端验证的方式比较简单，但密码是明文写在JS里的，如果需要更高的安全性，可能需要结合Google Workspace的身份验证（比如利用Google Sign-in），不过对于内部员工专区来说，简单的验证已经足够用了。
• Google Sites嵌入限制：在Google Sites里嵌入HTML时，要确保是用"嵌入"工具（Insert > Embed > Embed code）添加，有些复杂的JS可能会被限制，如果遇到问题，可以尝试简化代码或者检查Google Sites的嵌入规则。

内容的提问来源于stack exchange，提问作者ScarletWill1