如何让一个网页同时运行两个网站源码？-网页设计-锦华智联科技

使用 iframe（最简单、最常用）

<iframe> 是 HTML 的标准标签，它允许你在一个网页中嵌入另一个 HTML 文档，这是实现你需求最直接、最简单的方法。

（图片来源网络，侵删）

核心代码

你只需要在 HTML 文件中使用 <iframe> 标签，并将 src 属性设置为你想要嵌入的网址即可。

<iframe 
  src="https://www.example.com" 
  width="100%" 
  height="500" 
  frameborder="0" 
  scrolling="auto">
</iframe>

参数说明：

src: 嵌入的网页地址。
width / height: 设置 iframe 的宽度和高度，可以设置为像素值（如 width="600"）或百分比（如 width="100%"）。
frameborder="0": 去掉 iframe 默认的边框。
scrolling="auto": 当内容超出 iframe 大小时，自动显示滚动条，也可以设置为 "yes"（始终显示）或 "no"（不显示）。

完整源码示例（并排显示两个网站）

下面是一个完整的 HTML 文件，它会在一个页面上并排显示两个网站，这个例子中，我们分别嵌入百度和必应作为演示。

文件名：dual-websites.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">双网站展示</title>
    <style>
        /* 页面整体样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #333;
        }
        /* 容器样式，用于并排布局 */
        .container {
            display: flex;          /* 使用 Flexbox 布局 */
            gap: 20px;              /* 两个 iframe 之间的间距 */
            justify-content: center; /* 水平居中 */
            margin-top: 20px;
        }
        /* iframe 的公共样式 */
        .iframe-container {
            flex: 1;                /* 让两个 iframe 平分容器宽度 */
            max-width: 600px;       /* 设置一个最大宽度，避免在大屏幕上过宽 */
            border: 1px solid #ccc; /* 添加一个边框，让区域更清晰 */
            border-radius: 8px;     /* 圆角边框 */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 添加阴影效果 */
            overflow: hidden;       /* 隐藏超出边框的内容 */
        }
        iframe {
            width: 100%;            /* iframe 宽度填满容器 */
            height: 800px;          /* 设置一个固定的高度 */
            border: none;           /* 去掉 iframe 自身的边框 */
        }
        /* 响应式设计：在小屏幕上，改为垂直排列 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column; /* 改为垂直布局 */
            }
        }
    </style>
</head>
<body>
    <h1>双网站展示页面</h1>
    <div class="container">
        <!-- 第一个网站：百度 -->
        <div class="iframe-container">
            <iframe src="https://www.baidu.com" title="百度搜索"></iframe>
        </div>
        <!-- 第二个网站：必应 -->
        <div class="iframe-container">
            <iframe src="https://www.bing.com" title="必应搜索"></iframe>
        </div>
    </div>
</body>
</html>

如何使用：

将上面的代码复制到一个文本编辑器中（如 VS Code、Sublime Text 或记事本）。
将文件保存为 dual-websites.html。
用浏览器（如 Chrome、Firefox、Edge）打开这个文件，你就能看到一个并排显示百度和必应的页面。

使用 JavaScript 动态加载（更灵活）

如果你需要更复杂的控制,比如在用户点击按钮后才加载网站，或者需要根据不同条件加载不同的网站，可以使用 JavaScript 来动态创建和插入 iframe。

（图片来源网络，侵删）

核心代码

这个例子展示如何用 JavaScript 创建一个 iframe 并把它添加到页面中。

// 1. 创建 iframe 元素
const myIframe = document.createElement('iframe');
// 2. 设置 iframe 的属性
myIframe.src = 'https://www.github.com';
myIframe.width = '100%';
myIframe.height = '600px';
myIframe.frameBorder = '0';
myIframe.scrolling = 'auto';
// 3. 找到页面中要插入 iframe 的位置（例如一个 id 为 "content" 的 div）
const container = document.getElementById('content');
// 4. 将创建好的 iframe 添加到容器中
container.appendChild(myIframe);

完整源码示例（通过按钮切换网站）

这个例子会先显示一个提示,点击按钮后，才加载并显示两个网站。

文件名：js-dual-websites.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JS 动态加载双网站</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }
        #loadButton {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
        }
        #loadButton:hover {
            background-color: #0056b3;
        }
        .websites-container {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 20px;
            display: none; /* 初始状态隐藏 */
        }
        .iframe-wrapper {
            flex: 1;
            max-width: 600px;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }
        iframe {
            width: 100%;
            height: 700px;
            border: none;
        }
    </style>
</head>
<body>
    <h1>点击按钮加载网站</h1>
    <p>下方区域将动态加载两个网站。</p>
    <button id="loadButton">加载网站</button>
    <div id="websitesContainer" class="websites-container">
        <div class="iframe-wrapper">
            <iframe id="site1" src="" title="网站 1"></iframe>
        </div>
        <div class="iframe-wrapper">
            <iframe id="site2" src="" title="网站 2"></iframe>
        </div>
    </div>
    <script>
        // 获取按钮和容器元素
        const loadButton = document.getElementById('loadButton');
        const websitesContainer = document.getElementById('websitesContainer');
        const site1 = document.getElementById('site1');
        const site2 = document.getElementById('site2');
        // 为按钮添加点击事件监听器
        loadButton.addEventListener('click', function() {
            // 设置 iframe 的源地址
            site1.src = 'https://www.zhihu.com'; // 知乎
            site2.src = 'https://www.csdn.net';   // CSDN
            // 显示包含 iframe 的容器
            websitesContainer.style.display = 'flex';
            // （可选）禁用按钮，防止重复点击
            loadButton.disabled = true;
            loadButton.textContent = '网站已加载';
        });
    </script>
</body>
</html>

如何使用：

将代码保存为 js-dual-websites.html。
用浏览器打开。
页面初始只显示一个按钮。
点击“加载网站”按钮后，知乎和 CSDN 的网页会动态加载并显示在下方。

重要注意事项

同源策略：出于安全考虑，浏览器有一个“同源策略”，如果你的网页和要嵌入的网站不是来自同一个域名（协议、域名、端口都相同），那么你无法通过 JavaScript 读取 iframe 内部的内容（如 iframe.contentWindow.document），但仅仅是显示内容通常不受影响。
性能影响：在一个页面中加载多个复杂的网站（尤其是像淘宝、京东这样的大型电商网站）会消耗大量客户端的 CPU 和内存资源，可能导致页面卡顿。
网站许可：在嵌入他人网站前，最好确认对方是否允许被嵌入，有些网站可能会通过 X-Frame-Options HTTP 头来禁止被嵌入到 iframe 中。
移动端适配：在移动设备上，小屏幕的 iframe 会很难操作，使用响应式设计（如示例中的 @media 查询）在小屏幕上将布局改为垂直排列非常重要。

对于绝大多数情况,方法一（使用 iframe） 就足够了，它简单、直接且有效。

（图片来源网络，侵删）