Ubuntu 18.04换源与iframe隐藏滚动条实战指南

1. 从一条日期标题说起sources.list 与隐藏滚动条到底在解决什么问题2018 年 4 月 21 日这个日期本身就带着很强的时代印记。那会儿 Ubuntu 18.04 LTSBionic Beaver刚刚发布没几天国内一大批开发者和运维都在忙着升级系统、换软件源、调环境。标题里把linux sources.list、html-url、隐藏滚动条三件事放在一起看起来像是三个不相关的关键词堆叠但实际做过前端嵌入或者运维面板的人一眼就能看懂这是一次典型的“后端环境配置 前端页面嵌入”的混合记录。先说sources.list。它是 Debian 系 LinuxUbuntu、Debian、Kali 都属于这一系的软件源配置文件位置在/etc/apt/sources.list。系统装好之后默认指向的是官方源国内访问速度往往慢得让人抓狂apt update卡在Waiting for headers是家常便饭。换成国内镜像源之后下载速度能从几十 KB/s 直接拉到几 MB/s这个提升是实打实的。所以每次新装 Ubuntu第一件事几乎都是改源。再说html-url和隐藏滚动条。这两个词放在一起基本可以确定场景是在网页里用iframe嵌入一个外部页面或者内部系统页面然后发现 iframe 自带滚动条跟整体页面风格不搭需要把它藏掉。html-url指的是 iframe 的src属性指向的地址可能是本地 HTML 文件也可能是某个内网服务地址。隐藏滚动条这件事说简单也简单说坑也多因为不同浏览器、不同内核、不同渲染模式下表现完全不一样。所以这篇内容适合谁看三类人第一类是刚接触 Linux、正在装 Ubuntu 或者 Kali 的新手需要一份能直接抄的换源操作第二类是做运维面板、监控大屏、后台管理系统的前端需要在页面里嵌 iframe 又不想看到那根丑滚动条第三类是两者都沾一点的全栈需要在同一台机器上既配好环境又调好页面。下面我按实际操作的顺序把这几块拆开讲透。2. Ubuntu 18.04 sources.list 换源原理、选型与完整操作2.1 sources.list 到底在干什么为什么换源能提速/etc/apt/sources.list这个文件本质上是告诉apt这个包管理器去哪里下载软件包、去哪里下载索引。每一行格式大致是这样的deb http://archive.ubuntu.com/ubuntu/ bionic main restricted拆开看deb表示二进制包仓库对应的还有deb-src表示源码包后面是仓库地址再后面是发行版代号18.04 是bionic最后是组件名main、restricted、universe、multiverse。apt update做的事情就是去这些地址拉取Packages.gz之类的索引文件存到/var/lib/apt/lists/。你执行apt install的时候apt 先在本地索引里查这个包在哪个仓库、什么版本然后才去对应地址下载.deb文件。官方源archive.ubuntu.com的服务器在国外国内访问要经过多个网络节点延迟高、丢包多索引文件又不大不小几十 MB所以经常卡住。换成国内镜像之后物理距离近、带宽足索引拉取和包下载都会快很多。这不是玄学是网络路径决定的。注意换源之前一定要先备份原文件。我见过太多人直接vim改完保存结果格式写错apt直接报Malformed entry连apt update都跑不了最后只能重装。备份一条命令的事别省。2.2 换源前的准备工作与备份操作第一步确认系统版本。别想当然lsb_release -a或者cat /etc/os-release看一眼lsb_release -a输出里Codename那一行就是发行版代号。18.04 是bionic16.04 是xenial20.04 是focal。代号写错源就用不了这是新手最常犯的错。第二步备份sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak备份文件后缀用.bak是惯例方便你改坏了直接cp回来。我个人的习惯是再加一个带日期的备份比如sources.list.20180421这样多次修改之后还能回溯到某个时间点。第三步确认网络能通。换源之前先ping一下目标镜像地址比如ping mirrors.aliyun.com能通再改。如果连镜像都 ping 不通那换了也白换得先排查网络。2.3 主流镜像源对比与选择建议国内常用的 Ubuntu 镜像源有这么几个我列个表对比一下方便你按自己的网络环境选镜像源地址前缀特点适用场景阿里云mirrors.aliyun.com带宽足更新及时全国覆盖好大多数情况首选清华 TUNAmirrors.tuna.tsinghua.edu.cn教育网友好同步频率高校园网环境中科大 USTCmirrors.ustc.edu.cn老牌镜像稳定华东地区网易mirrors.163.com速度不错备用选择华为云mirrors.huaweicloud.com云服务器内网访问快华为云 ECS选哪个我的经验是如果你在校园网优先清华或中科大如果是家用宽带或公司网络阿里云最稳如果机器本身在云上用云厂商自己的内网镜像源走内网不占公网带宽速度最快还免费。2.4 完整换源操作与验证以阿里云为例18.04 的sources.list内容可以写成这样sudo tee /etc/apt/sources.list EOF deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse EOF这里用tee而不是vim是因为tee配合 heredoc 能一次性写入不容易漏行。deb-src那几行是源码仓库如果你不打算自己编译软件可以注释掉或者删掉能省一点索引更新时间。写完执行sudo apt update看到Hit、Get、Reading package lists... Done就说明成功了。如果报错大概率是代号写错或者地址拼错回去检查。实操心得apt update之后如果提示某些仓库Release file is not valid yet通常是系统时间不对。date看一下如果时间偏差大sudo ntpdate ntp.aliyun.com同步一下再试。这个坑我在虚拟机里遇到过好几次虚拟机挂起恢复后时间会漂移。2.5 换源之后的收尾与常见误区换完源别急着装东西先跑一次sudo apt upgrade把已有包更新到最新。18.04 刚发布那会儿官方源和镜像源之间可能有几小时到一天的同步延迟如果你在发布当天就换源可能镜像还没同步完这时候apt update会提示某些包版本比官方低。等一天再更新就行不是配置问题。另一个误区是“源越多越好”。有人喜欢把阿里、清华、中科大全写进去觉得这样哪个快用哪个。实际上 apt 会按顺序尝试第一个源里找不到的包才去第二个找源多了索引文件体积翻倍apt update反而更慢。选一个稳定的就够了。3. iframe 嵌入 html-url 与隐藏滚动条的完整方案3.1 为什么 iframe 会带滚动条隐藏它的三种思路iframe是 HTML 里用来嵌入另一个页面的标签src属性就是标题里说的html-url。默认情况下如果被嵌入页面的内容高度或宽度超过了 iframe 的可视区域浏览器就会自动显示滚动条。这个滚动条是浏览器原生渲染的样式由操作系统和浏览器决定你没法用 CSS 直接改它的颜色和宽度::-webkit-scrollbar只能改 WebKit 内核的Firefox 和部分场景下无效。隐藏滚动条有三条路第一条用scrollingno属性。这是最老的办法HTML4 时代就有但 HTML5 里已经废弃了虽然大多数浏览器还兼容但不推荐在新项目里用。第二条用 CSS 的overflow: hidden。给 iframe 本身设置overflow: hidden没用因为滚动条是 iframe 内部文档的不是 iframe 元素的。正确做法是控制被嵌入页面或者用seamless属性这个属性兼容性极差基本可以忽略。第三条也是最可靠的一条给 iframe 外层套一个容器容器overflow: hiddeniframe 宽度设得比容器宽一点把滚动条“挤”到容器外面去。这个思路下面详细讲。3.2 最稳的方案容器裁剪法先看代码div classiframe-wrap iframe srchttps://example.com/page frameborder0/iframe /div.iframe-wrap { width: 100%; height: 600px; overflow: hidden; position: relative; } .iframe-wrap iframe { width: calc(100% 20px); height: 100%; border: 0; display: block; }原理很简单容器宽度是 100%iframe 宽度是100% 20px多出来的 20px 正好把右侧滚动条推到容器可视区域之外容器overflow: hidden一裁滚动条就看不见了。20px 是个经验值大多数浏览器默认滚动条宽度在 15 到 17px 之间留 20px 有余量。这个方案的好处是不依赖被嵌入页面的配合不管对方页面怎么写你这边都能藏掉滚动条。缺点是 iframe 内部内容如果本身需要滚动才能看全用户就没法滚了。所以这个方案适合嵌入那些“内容高度固定、不需要滚动”的页面比如统计图表、状态面板。注意calc(100% 20px)里的加号两边必须有空格写成calc(100%20px)是无效的。这个细节坑过不少人CSS 的 calc 语法对空格很敏感。3.3 需要保留滚动能力时的替代方案如果被嵌入页面内容很长用户确实需要滚动那就不能简单裁掉了。这时候有两个选择。选择一让被嵌入页面自己处理滚动。也就是说iframe 高度设成内容实际高度外层容器负责滚动。这需要你能控制被嵌入页面或者用postMessage让子页面把高度传上来。代码大概是这样window.addEventListener(message, function(e) { if (e.data e.data.type resize) { document.getElementById(myIframe).style.height e.data.height px; } });子页面里用ResizeObserver监听自身高度变化通过postMessage发给父页面。这个方案最干净滚动条出现在父页面样式统一可控。选择二用::-webkit-scrollbar把滚动条“美化”成透明。这个只对 Chrome、Edge、Safari 等 WebKit/Blink 内核有效.iframe-wrap iframe::-webkit-scrollbar { display: none; }但注意这个选择器作用在 iframe 元素上对 iframe 内部文档的滚动条是无效的。要作用到内部文档得在子页面里写。所以这个方案同样需要你能控制子页面。3.4 跨域场景下的限制与应对如果html-url指向的是别人的域名你控制不了子页面那postMessage和子页面 CSS 都用不了。这时候只能回到容器裁剪法或者接受滚动条存在。还有一个折中办法用sandbox属性限制 iframe 行为配合scrollingno。但scrolling已废弃sandbox又会限制脚本执行可能把子页面功能搞坏。我的建议是跨域嵌入如果对方页面有滚动条优先跟对方沟通让他们提供一个无滚动条的嵌入版本这比你在前端硬扛要靠谱得多。4. 把 Linux 环境配置和前端嵌入串起来的实际场景4.1 一个典型场景运维监控面板想象这样一个场景你在 Ubuntu 18.04 服务器上部署了一套监控系统后端跑在 Linux 上前端是一个 Web 面板。面板里有一个区域用 iframe 嵌入了 Grafana 的某个仪表盘html-url指向http://localhost:3000/d/xxx。Grafana 默认会带滚动条跟面板整体风格不搭你就需要隐藏它。这个场景里Linux 侧的sources.list配置决定了你能不能顺利装上 Docker、能不能快速拉取 Grafana 镜像前端侧的 iframe 处理决定了最终页面的观感。两件事看似无关实际在同一个项目里是连着的。4.2 环境配置与前端调试的先后顺序我的习惯是先把 Linux 环境弄好再调前端。原因很简单前端嵌入的html-url往往依赖后端服务后端服务又依赖 Linux 环境。如果环境没配好服务起不来前端 iframe 打开就是 404 或者连接拒绝你根本没法调滚动条。具体顺序换源apt update apt upgrade把系统更新到最新。装 Docker如果需要sudo apt install docker.io然后sudo systemctl enable --now docker。拉取并启动后端服务确认curl http://localhost:端口能返回内容。打开前端页面检查 iframe 的src是否能正常加载。处理滚动条用浏览器开发者工具确认效果。这个顺序能帮你快速定位问题出在哪一层。如果第 3 步就失败那根本不用看前端。4.3 用 curl 和浏览器工具交叉验证Linux 侧验证服务是否正常curl是最快的curl -I http://localhost:3000看返回的 HTTP 状态码200 就是正常502、404 就是服务有问题。-I只取响应头不下载内容快。前端侧验证 iframe 是否加载成功打开浏览器开发者工具看 Network 面板里 iframe 对应的请求状态。如果显示(blocked: mixed content)说明你的页面是 HTTPS但 iframe 的html-url是 HTTP浏览器拦截了。解决办法是把 iframe 地址也换成 HTTPS或者页面本身用 HTTP。实操心得Chrome 从某个版本开始对混合内容的拦截越来越严。如果你在内网用 HTTP 嵌 HTTP没问题但一旦外层页面上了 HTTPS内层 HTTP 就会被拦。这个坑在本地开发时不容易发现一上生产就暴露。5. 常见问题与排查速查5.1 sources.list 相关问题现象可能原因解决办法apt update 报 Malformed entry行格式错误缺字段或多空格对照标准格式逐行检查提示 Release file 过期系统时间不对同步 NTP 时间某些包找不到镜像未同步或组件缺失换镜像或补全 universe/multiverse下载速度依然慢镜像选择不当换阿里云或云厂商内网源apt update 卡住不动网络不通或 DNS 问题检查 /etc/resolv.confping 镜像地址5.2 iframe 隐藏滚动条相关问题现象可能原因解决办法滚动条藏不掉只给 iframe 设了 overflow改用容器裁剪法藏掉后内容看不全内容本身需要滚动改用 postMessage 动态高度Firefox 下滚动条还在webkit 选择器无效用容器裁剪法不依赖内核移动端出现横向滚动iframe 宽度超出检查 calc 计算和容器宽度跨域 iframe 无法通信同源策略限制与对方协商或接受滚动条5.3 独家避坑技巧第一个技巧改sources.list之前先用apt-get update跑一次把当前能用的索引缓存下来。这样即使改坏了短时间内apt install还能用缓存装包给你时间修复。第二个技巧iframe 容器裁剪法里那个 20px 的余量不是固定的。在 Windows 上 Chrome 的滚动条大约 17px在 macOS 上因为系统默认隐藏滚动条可能根本不需要这个余量。所以上线前在目标用户的系统上实测一下别照搬。第三个技巧如果你用postMessage传高度记得加origin校验不然任何页面都能给你的 iframe 发消息有安全风险。代码里写if (e.origin ! https://trusted.com) return;。第四个技巧Ubuntu 18.04 已经过了标准支持期官方源可能已经归档。如果apt update提示 404需要把源地址里的archive.ubuntu.com换成old-releases.ubuntu.com或者升级到更新的 LTS 版本。这个情况在 2023 年之后越来越常见老系统维护要留意。6. 我个人的几点体会这套东西我从 2018 年一直用到后来中间踩的坑基本都写在上面了。最大的感受是Linux 环境配置和前端页面调试看起来是两个世界的事但在实际项目里经常是同一根链条上的两环。你把sources.list配好服务跑起来前端 iframe 才有东西可嵌你把 iframe 滚动条处理好整个面板的完成度才上得去。另一个体会是隐藏滚动条这件事网上搜到的方案五花八门但真正跨浏览器、跨场景都稳的还是容器裁剪法。那些依赖scrollingno或者::-webkit-scrollbar的方案要么已废弃要么只对特定内核有效用之前一定要想清楚你的用户用什么浏览器。最后分享一个小技巧如果你经常需要在不同机器上配 Ubuntu 源可以把写好的sources.list存成一个 gist 或者内网文件新机器上wget下来直接cp到/etc/apt/比每次手写快得多也不容易出错。我自己的做法是按版本存bionic.list、focal.list分开用的时候对号入座。