如何在HTML中添加多个链接作为src 实现多平台直播聊天同屏展示

你只需要写一个本地HTML文件即可实现需求，无需安装额外工具，符合你目前的基础HTML知识储备，具体实现如下：

完整可直接使用的代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多平台聊天聚合</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 容器设置为弹性布局，实现子元素并排 */
        .chat-container {
            display: flex;
            width: 100vw;
            height: 100vh;
        }
        /* 每个聊天框平分宽度，撑满全屏 */
        .chat-frame {
            flex: 1;
            border: none;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <!-- 替换下方src为你自己的聊天链接，需要加多少个聊天框就复制多少个iframe标签 -->
        <iframe class="chat-frame" src="https://dashboard.twitch.tv/popout/u/xyz/stream-manager/chat"></iframe>
        <iframe class="chat-frame" src="https://xyz.xyz/streamchat/xyz?transparent=false"></iframe>
        <!-- 更多聊天框可以继续加在这里 -->
    </div>
</body>
</html>

使用方法 #

• 将上述代码复制到记事本中，把iframe标签的src属性值替换为你自己的所有聊天页面链接，有多少个平台就添加多少个iframe标签
• 把文件保存为后缀为.html的文件，比如命名为聚合聊天.html
• 双击该文件即可在浏览器打开，所有聊天框会自动平分窗口宽度并排展示，你可以直接拖动浏览器窗口调整整体大小

常见问题处理 #

• 如果部分平台的聊天页面无法加载，是因为平台设置了iframe嵌入限制，你可以安装对应浏览器的解除X-Frame-Options限制扩展，开启后即可正常加载
• 如果想要调整单个聊天框的宽度，只需要给对应iframe添加样式即可，比如要让某个聊天框宽度是其他的2倍，就写成<iframe class="chat-frame" style="flex: 2" src="xxx">
• 如果想要改成多行布局，只需要给.chat-container添加flex-wrap: wrap样式，同时给.chat-frame添加min-width: 350px样式，聊天框会在宽度不够时自动换行

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