如何点击按钮后在.source-html div中展示输入URL的源码？

直接使用view-source:协议无法通过JavaScript直接获取网页源码（这是浏览器内置的特殊视图模式），我们需要通过HTTP请求获取目标URL的原始文本内容，再将其渲染到类名为.source-html的容器中。以下是补充后的完整实现：

完整JavaScript代码 #

const input = document.querySelector("#input");
const button = document.querySelector(".view");
const sourceContainer = document.querySelector(".source-html");

button.addEventListener("click", async () => {
  const url = input.value.trim();
  if (!url) {
    sourceContainer.textContent = "请输入有效的URL地址";
    return;
  }

  try {
    // 发起请求获取网页原始内容
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`请求失败：${response.status} ${response.statusText}`);
    }
    const sourceCode = await response.text();
    
    // 将源码展示到容器中，使用<pre>标签保留格式
    sourceContainer.innerHTML = `<pre>${escapeHtml(sourceCode)}</pre>`;
  } catch (error) {
    sourceContainer.textContent = `出错了：${error.message}`;
  }
});

// 辅助函数：转义HTML特殊字符，避免注入问题
function escapeHtml(text) {
  return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

对应的HTML结构 #

<input id="input" type="text" placeholder="输入网页URL" />
<button type="button" class="view">View Source</button>

<div class="source-html"></div>

关键说明 #

• 使用fetch API发起异步请求，获取目标网页的原始文本内容
• 增加输入校验：如果输入为空，提示用户补充URL
• 处理请求失败场景，给出明确的错误提示
• 用escapeHtml函数转义HTML特殊字符，避免源码中的标签被浏览器解析，同时防范XSS风险
• 使用<pre>标签包裹源码，保留原始的换行和缩进格式

注意事项 #

浏览器的同源策略会限制跨域请求：

• 仅能请求与当前页面同域名的网页源码
• 若目标服务器配置了CORS（跨域资源共享）允许你的域名访问，才能获取跨域网页的源码

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