如何在JavaScript中嵌入PHP的<?php if($loggedin): ?>条件控制按钮并隐藏代码

嘿，我完全懂你的需求——既要用服务器端的$loggedin状态控制JS里渲染的按钮，又不想让未授权用户看到另一个按钮的代码对吧？这其实可以通过PHP直接嵌入JS代码实现，因为PHP是在服务器端执行的，最终输出到客户端的JS已经是处理后的结果，不会暴露未被触发分支的代码。

核心思路 #

PHP会在服务器端先判断$loggedin的状态，然后只生成对应状态的JS逻辑代码，客户端拿到的JS里只会有符合当前用户状态的按钮相关代码，另一个按钮的代码根本不会被输出，自然就实现了隐藏效果。

具体实现示例（search-box.php中） #

方式1：分分支完全隔离代码

这种方式适合两个按钮逻辑差异较大的场景：

<?php
// 假设$loggedin是你已在服务器端验证过的登录状态变量
?>

<script>
// 你的其他JS代码...

// 直接用PHP条件嵌入不同的按钮渲染逻辑
<?php if($loggedin): ?>
// 登录状态：渲染加粗的Push按钮
const actionButton = document.createElement('button');
actionButton.textContent = 'Push';
actionButton.style.fontWeight = 'bold';
// 这里可以添加Push按钮的点击事件等逻辑
actionButton.addEventListener('click', () => {
    console.log('执行Push操作');
    // 你的业务逻辑代码
});
<?php else: ?>
// 未登录状态：渲染加粗的Pop按钮
const actionButton = document.createElement('button');
actionButton.textContent = 'Pop';
actionButton.style.fontWeight = 'bold';
// 添加Pop按钮的点击事件
actionButton.addEventListener('click', () => {
    console.log('执行Pop操作');
    // 你的业务逻辑代码
});
<?php endif; ?>

// 将按钮挂载到页面容器
document.getElementById('search-box-actions').appendChild(actionButton);

// 你的其他JS代码...
</script>

方式2：提取公共逻辑，用PHP控制变量

如果两个按钮的基础逻辑（比如样式、挂载方式）一致，只是文本和点击行为不同，可以这样优化，减少重复代码：

<?php
$buttonText = $loggedin ? 'Push' : 'Pop';
?>

<script>
// 创建按钮并设置公共样式
const actionButton = document.createElement('button');
actionButton.style.fontWeight = 'bold';
actionButton.textContent = '<?php echo $buttonText; ?>';

// 根据登录状态设置不同的点击逻辑
actionButton.addEventListener('click', () => {
    <?php if($loggedin): ?>
    // 登录后的操作逻辑
    alert('执行Push操作');
    <?php else: ?>
    // 未登录后的操作逻辑
    alert('执行Pop操作');
    <?php endif; ?>
});

// 挂载到页面
document.getElementById('search-box-actions').appendChild(actionButton);
</script>

关键注意点 #

• 一定要确保$loggedin是服务器端验证后的值，不要依赖客户端传递的参数（比如URL参数、localStorage），避免被恶意篡改，导致权限逻辑失效。
• 这种方式输出的JS是服务器端预编译后的，客户端只能看到当前状态对应的代码，完全不会暴露另一个按钮的逻辑，满足你隐藏代码的需求。

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