如何实现仅通过jQuery .load()加载外部页面时才显示内容？

这个需求我之前做项目时也碰到过，分享几个靠谱的实现思路，从后端到前端都有，你可以根据自己的技术栈选择：

方案一：后端检查AJAX请求头（最可靠） #

jQuery的.load()本质是AJAX请求，默认会给请求加上X-Requested-With: XMLHttpRequest这个HTTP头。我们可以在外部页面的后端代码里检查这个头，只有当它存在且值正确时，才输出内容；否则直接重定向到index页面或者返回空白。

举个PHP的例子：

<?php
// 检查是否是AJAX请求
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
    // 不是AJAX请求，直接跳转到index页面
    header('Location: index.php');
    exit;
}
?>

<!-- 下面是你要加载的页面内容 -->
<div class="loaded-content">
  这里是只有AJAX加载才会显示的内容
</div>

优点：完全在后端控制，用户无法通过前端手段绕过，安全性最高。
注意：如果是其他前端框架的AJAX请求，可能需要手动设置这个请求头，但jQuery的.load()是默认带的，所以没问题。

方案二：通过自定义GET参数验证 #

在index页面调用.load()时，给外部页面加一个自定义参数，比如loaded=1，然后外部页面后端检查这个参数是否存在且合法。

index页面的调用代码：

$('#target-div').load('external.html?loaded=1');

外部页面的后端（PHP）判断：

<?php
if (!isset($_GET['loaded']) || $_GET['loaded'] !== '1') {
    header('Location: index.php');
    exit;
}
?>

优点：实现简单，不需要依赖请求头，兼容性好。
缺点：如果用户猜到参数，直接在地址栏输入external.html?loaded=1也能访问，适合对安全性要求不高的场景。如果要更安全，可以用随机生成的token或者加密参数，但会增加复杂度。

方案三：前端判断（作为补充，不单独使用） #

如果没有后端支持，也可以用前端JS做判断，但这种方法容易被绕过，建议和后端方案结合使用。

思路是检查页面的来源（document.referrer）是否是index页面，或者判断当前页面是否是被AJAX加载的：

<script>
// 检查来源是否是index页面，且是AJAX环境
const isFromIndex = document.referrer.includes('index.html');
const isAjax = window.XMLHttpRequest && typeof XMLHttpRequest !== 'undefined';

if (!isFromIndex || !isAjax) {
    // 清空页面内容或者跳转到index
    document.body.innerHTML = '';
    // window.location.href = 'index.html';
}
</script>

注意：document.referrer可能会被浏览器隐私设置拦截，导致获取不到，所以这个方法只能作为辅助，不能单独依赖。

总结一下，优先选方案一，安全性最高；如果后端没权限修改，再考虑方案二或三的组合。

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