如何无需滚动iframe即可展示网页头部？寻求替代技术方案

嘿，针对你想要做小屏幕内容拼贴（比如公交到站信息）、同时解决iframe滚动冲突的需求，我给你几个不用太折腾CSS/Bootstrap的方案：

1. 直接用原生HTML做固定内容块（最推荐，完全可控） #

别用iframe了，直接把你需要展示的公交信息用普通HTML元素写出来，加一丢丢基础样式就能适配小屏幕，还不会有滚动冲突。

举个现成的例子，复制粘贴就能用：

<!-- 公交信息卡片 -->
<div style="width: 300px; height: 200px; border: 1px solid #eee; padding: 12px; overflow: hidden; border-radius: 8px;">
  <h3 style="margin-top: 0; font-size: 18px;">XX路公交到站提醒</h3>
  <p style="margin: 8px 0;"><strong>下一班:</strong> 3分钟后抵达</p>
  <p style="margin: 8px 0;"><strong>再下一班:</strong> 12分钟后抵达</p>
  <img src="bus-icon.png" style="width: 50px; float: right; margin-top: -60px;" alt="公交图标">
</div>

• overflow: hidden帮你隐藏超出固定尺寸的内容，只展示你关心的核心信息
• 固定width和height完美适配小屏幕，光标在内容块上时只会滚动父页面
• 加了点圆角和浅边框，视觉上也更舒服

2. 给iframe加禁用滚动的属性（如果一定要用iframe） #

要是你还是想用iframe展示已有页面，给它加几个属性就能解决滚动问题：

<iframe src="你的公交信息页面地址" 
        width="300px" 
        height="200px" 
        scrolling="no" 
        frameborder="0"
        style="overflow: hidden; border-radius: 8px;"></iframe>

• scrolling="no"直接禁用iframe内部的滚动条
• overflow: hidden作为双重保障，防止意外滚动
• 固定宽高适配小屏幕，光标在iframe上时只会响应父页面的滚动

3. Bootstrap卡片组件（极简上手，视觉效果更好） #

如果你愿意花2分钟尝试一下Bootstrap，它的卡片组件天生适配小屏幕，代码超简单：
首先在你的页面头部复制粘贴这段Bootstrap的样式链接（不用下载任何东西）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

然后写卡片内容：

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">XX路公交到站信息</h5>
    <p class="card-text"><strong>下一班:</strong> 3分钟后抵达</p>
    <p class="card-text"><strong>再下一班:</strong> 12分钟后抵达</p>
    <img src="bus-icon.png" class="card-img-top" alt="公交图标">
  </div>
</div>

• 不用自己写复杂CSS，Bootstrap会自动帮你适配不同小屏幕尺寸
• 自带圆角、阴影，比原生HTML块视觉效果好很多
• 同样不会有iframe的滚动冲突问题

额外小技巧：抓取外部页面的首段内容 #

如果你需要展示其他网页的首段内容（比如公交官网的实时信息），可以用简单的JavaScript实现（注意：只能抓取和你当前页面同域名的网站，否则会有跨域限制）：

// 假设你要抓取的页面是同域名的bus-info.html
fetch('bus-info.html')
  .then(response => response.text())
  .then(html => {
    // 提取页面的第一个段落
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const firstPara = doc.querySelector('p');
    // 把提取的内容放到容器里
    document.getElementById('bus-container').appendChild(firstPara);
  });

然后在HTML里加一个容器：

<div id="bus-container" style="width: 300px; height: 200px; overflow: hidden; border: 1px solid #eee; padding: 12px;"></div>

这样就能只展示目标页面的首段内容，完全替代iframe，还没有滚动烦恼~

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