如何在自有网页的同一屏幕中嵌入完整外部网站？

1. 使用 <iframe> 标签（最直接） #

这是嵌入外部网站的标准方法，直接在HTML里添加标签即可：

<iframe 
  src="https://目标网站地址.com" 
  width="100%" 
  height="800px" 
  frameborder="0"
  scrolling="auto"
></iframe>

• 注意：如果目标网站设置了 X-Frame-Options 响应头（比如DENY或SAMEORIGIN），浏览器会阻止嵌入，这种方法就失效了。

2. 使用 <object> 标签 #

作为iframe的替代方案，兼容性略有差异，代码示例：

<object 
  data="https://目标网站地址.com" 
  width="100%" 
  height="800px"
>
  你的浏览器不支持object标签，请升级后重试
</object>

同样受限于目标网站的X-Frame-Options限制。

3. 反向代理绕过嵌入限制（适合对方禁止iframe的场景） #

如果目标网站明确禁止被嵌入，你可以搭建反向代理服务器，先从服务器端拉取目标网站内容，再返回给前端页面渲染：

示例（Node.js + http-proxy） #

1. 安装依赖：

npm install http-proxy

2. 简单代理服务器代码：

const http = require('http');
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxyServer({});
const server = http.createServer((req, res) => {
  // 替换成你要嵌入的目标网站地址
  proxy.web(req, res, { target: 'https://目标网站地址.com' });
});

server.listen(3000);

3. 前端页面请求代理地址：

<iframe src="http://localhost:3000" width="100%" height="800px"></iframe>

⚠️ 注意：这种方法要严格遵守版权合规，同时目标网站可能有反爬机制，可能导致代理IP被封禁。

4. 利用官方嵌入API（针对特定内容） #

如果只是需要嵌入外部网站的部分内容（比如视频、文章、组件），优先找对方提供的官方嵌入方案：

• 比如YouTube视频：直接使用官方生成的iframe代码
• 比如Medium文章：用<script>标签嵌入官方提供的代码
  这种方式不会有跨域或嵌入限制问题，且符合对方的使用规范。

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