html显示另一个网站的代码

使用 <iframe> 嵌入目标网页

通过 <iframe> 标签可直接嵌入外部网页,但需注意跨域限制和权限问题。

示例代码：

<iframe src="https://example.com" width="600" height="400" sandbox="allow-scripts"></iframe>

通过API获取网页内容并转为代码文本

若需直接展示网页HTML代码，可通过后端服务器抓取网页内容,避免前端跨域限制。

实现步骤：

1. 后端使用fetch或curl获取目标网页HTML。
2. 将HTML内容转义为纯文本。
3. 前端通过接口获取转义后的代码并显示。

示例（伪代码）：

// 后端（Node.js示例）
const html = fetch('https://example.com').text();
const escapedHtml = escape(html); // 转义特殊字符
res.send(escapedHtml);
// 前端
fetch('/api/get-page-code').then(code => {
  document.getElementById('code').textContent = code;
});

使用第三方代码高亮服务

通过第三方服务（如GitHub Gist、Hilite.me）直接嵌入格式化后的代码。

示例（Hilite.me）：

<iframe src="https://hilite.me/embed/?input=https://example.com" width="600" height="400"></iframe>

抓屏工具生成静态代码截图

适用于无需交互的场景,将网页代码截图作为图片嵌入。

工具推荐：

• HTML to Image：浏览器插件,一键生成网页代码截图。
• Code2Flow：在线工具,将代码转换为流程图。

示例代码：

<img src="code-screenshot.png" alt="网页代码截图">

常见问题与解答

问题1：如何突破跨域限制直接获取外部网页内容？
解答：需通过服务器端代理（如Node.js、PHP）抓取目标网页，再将内容传递给前端。

// 后端（Express示例）
app.get('/proxy', (req, res) => {
  fetch('https://target.com/page')
    .then(response => response.text())
    .then(html => res.send(html));
});

问题2：如何确保嵌入的代码符合版权规范？
解答：

1. 仅嵌入公共域名或授权代码（如开源项目）。
2. 添加来源声明（如<!-代码来自 https://example.com -->）。
3. 避免商业用途，或