如何根据JavaScript可用性加载对应PHP文件并解决跳转延迟问题

方案1：无跳转实现（推荐，无任何延迟） #

该方案无需页面跳转，完全不会出现内容闪烁或者不完整的问题：

<?php
require_once __DIR__.'/includes/Connect.php';
// 预读取两个模块的输出内容，暂不输出到页面
ob_start();
require_once __DIR__.'/includes/Nojs.php';
$nojsContent = ob_get_clean();

ob_start();
require_once __DIR__.'/includes/Main.php';
require_once __DIR__.'/includes/footer.php';
$jsContent = ob_get_clean();
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- JS禁用时仅显示该标签内的内容 -->
    <noscript>
        <?php echo $nojsContent; ?>
    </noscript>
    <script>
        // JS启用时直接清空页面，写入主内容
        document.body.innerHTML = '';
        document.write(<?php echo json_encode($jsContent); ?>);
    </script>
</body>
</html>

逻辑说明：

• JS禁用时，<script>标签内代码不执行，页面仅渲染<noscript>内的无JS版本内容
• JS启用时，代码会立刻清空默认内容，写入主页面内容，用户完全感知不到切换过程

方案2：无感知跳转实现 #

如果需要拆分独立页面，可以用该方案，完全避免跳转前看到不完整内容：

<?php
require_once __DIR__.'/includes/Connect.php';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- JS启用时立刻跳转，不残留历史记录 -->
    <script>
        location.replace('/main.php');
    </script>
    <!-- JS禁用时立刻跳转 -->
    <meta http-equiv="refresh" content="0; url=/nojs.php">
    <style>
        /* 默认隐藏所有内容，避免跳转前暴露中间页 */
        body { display: none; }
        noscript { display: block !important; padding: 20px; }
    </style>
</head>
<body>
    <!-- 极端跳转失败的降级提示 -->
    <noscript>
        <p>如果页面未自动跳转，请<a href="/nojs.php">点击此处访问</a></p>
    </noscript>
</body>
</html>

你需要额外新建两个页面：

• main.php：加载Main.php和footer.php的业务逻辑
• nojs.php：加载Nojs.php的业务逻辑

原代码失效原因 #

你之前的写法混淆了服务端和客户端的执行逻辑：PHP是服务端语言，所有代码会在页面发送到浏览器前执行完成，不会识别前端的<noscript>标签。所以不管用户是否开启JS，Nojs.php和Main.php都会被服务端加载输出，仅<noscript>标签内的内容会在JS禁用时被浏览器隐藏，标签外的主内容永远会展示，因此不符合需求。

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