下面是php $_SERVER打印的信息，可以直观的看到差异
引言
在现代Web开发中，前端技术栈的更新换代是常有的事。Vue.js和Element UI框架因其轻量级和易用性，成为了许多新项目的首选。然而，当这些新技术需要与旧项目集成时，就会出现一些挑战。本文将探讨如何在不影响旧项目的前提下，使用Vue和Element框架在iframe中隐藏旧项目的左侧菜单和header。
场景描述
假设我们有一个旧项目，它使用传统的Web技术构建，包括一个左侧的菜单和一个顶部的header。现在，我们需要在一个新的Vue + Element项目中通过iframe来展示这个旧项目的某些页面。问题来了：如何在Vue项目中打开iframe时，隐藏旧项目的左侧菜单和header，而不改变旧项目本身的布局？
处理方案
为了解决这个问题，我们需要在旧项目中添加逻辑来判断当前页面是否被iframe包含。如果是，我们就隐藏掉左侧菜单和header。这样，当页面在iframe中打开时，用户就不会看到这些元素，而在直接访问旧项目时，这些元素仍然可见。
实现步骤
1. 服务器端判断
首先，我们需要在服务器端添加逻辑来判断页面是否在iframe中打开。这可以通过检查HTTP_SEC_FETCH_DEST请求头来实现。如果这个请求头的值是iframe，那么我们可以确定页面是在iframe中打开的。
PHP代码实现
在旧项目的PHP代码中，我们可以定义一个常量来表示页面是否在iframe中：
define('IS_IN_IFRAME', !empty($_SERVER['HTTP_SEC_FETCH_DEST']) && $_SERVER['HTTP_SEC_FETCH_DEST'] === 'iframe');
这行代码检查$_SERVER['HTTP_SEC_FETCH_DEST']是否存在，并且它的值是否等于iframe。如果是，IS_IN_IFRAME常量将被设置为true。
2. 模板页面判断
接下来，在旧项目的模板页面中，我们可以使用IS_IN_IFRAME常量来判断是否隐藏header和左侧菜单。如果IS_IN_IFRAME为true，则隐藏这些元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<?php if (!IS_IN_IFRAME): ?>
<!-- 显示header -->
<header>Header Content</header>
<!-- 显示左侧菜单 -->
<aside>Menu Content</aside>
<?php endif; ?>
<!-- 页面主要内容 -->
<main>Main Content</main>
</body>
</html>
3. Vue项目中的Iframe集成
在Vue项目中，我们可以通过Element UI提供的iframe组件来集成旧项目页面。只需确保在iframe的src属性中正确设置了旧项目的URL。
<template>
<el-iframe src="https://old-project-url.com/page"></el-iframe>
</template>
结论
通过上述步骤，我们可以在不影响旧项目的情况下，实现在Vue项目中通过iframe打开旧项目页面时隐藏左侧菜单和header的功能。这种方法既保持了旧项目的完整性，又满足了新项目的需求，实现了前后端技术的无缝集成。
