当前位置：首页 > 行业动态 > 正文

html不同域名显示不同内容

实现HTML不同域名显示不同内容，需结合服务器端逻辑，通过检测HTTP请求头中的Host字段，或前端JS获取location.hostname，配合条件判断加载对应内容模块，适用于多域名适配或

实现原理与核心思路

HTML 页面本身无法直接感知当前访问的域名，需借助 JavaScript 获取当前页面的 window.location.hostname，再通过逻辑判断动态修改页面内容，若需更可靠的效果（如 SEO 友好），需通过 后端服务器 根据域名返回不同 HTML 内容。

前端实现方案（JavaScript）

基础实现：通过 JavaScript 判断域名

<!DOCTYPE html>
<html>
<head>动态内容展示</title>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const currentHost = window.location.hostname;
      const contentDiv = document.getElementById("content");
      if (currentHost === "example.com") {
        contentDiv.innerHTML = "<h1>欢迎访问 Example 域名！</h1>";
      } else if (currentHost === "test.com") {
        contentDiv.innerHTML = "<h1>这是 Test 域名的内容</h1>";
      } else {
        contentDiv.innerHTML = "<h1>默认内容</h1>";
      }
    });
  </script>
</head>
<body>
  <div id="content">加载中...</div>
</body>
</html>

进阶优化：封装函数与数据分离

<script>
  const domainContentMap = {
    "example.com": "<h1>Example 专属内容</h1>",
    "test.com": "<p>Test 域名的特定信息</p>"
  };
  function displayContentByDomain() {
    const host = window.location.hostname;
    const content = domainContentMap[host] || "<h3>默认内容</h3>";
    document.getElementById("content").innerHTML = content;
  }
  document.addEventListener("DOMContentLoaded", displayContentByDomain);
</script>

后端实现方案（以 Node.js 为例）

服务器逻辑判断域名

const express = require("express");
const app = express();
app.get("/", (req, res) => {
  const host = req.headers.host; // 获取请求的域名
  let htmlContent;
  if (host === "example.com") {
    htmlContent = "<h1>Example 域名内容</h1>";
  } else if (host === "test.com") {
    htmlContent = "<p>Test 域名内容</p>";
  } else {
    htmlContent = "<h3>默认内容</h3>";
  }
  res.send(`<!DOCTYPE html><body>${htmlContent}</body></html>`);
});
app.listen(80, () => console.log("Server running..."));

方案对比与选择建议

方案 优点 缺点
纯前端 JavaScript 快速部署，无需服务器配置 SEO 不友好，依赖浏览器支持
后端服务器处理 SEO 友好，安全性高 需服务器权限，开发成本较高
URL 参数控制 简单易用，兼容低版本浏览器 暴露逻辑，可能被改动

常见问题与解答

问题 1：如何让子域名（如 sub.example.com）也匹配主域名规则？

解答：
可通过模糊匹配或正则表达式判断域名前缀。

if (currentHost.includes("example.com")) {
  // 匹配 example.com 及其子域名
}

问题 2：前端方案对 SEO 有影响吗？如何解决？

解答：
影响：搜索引擎爬虫可能不会执行 JavaScript，导致默认内容被收录。
解决方案：

  1. 使用后端方案生成不同域名的静态 HTML。
  2. 通过 <noscript> 标签提供备用内容。
  3. 在 HTML <head> 中添加针对搜索引擎的 Meta 标签（如 `robots-
域名检测跨域内容分发
0

相关文章