JavaScript中关于iframe滚动条的去除和保留

沃梦达教程前端开发

2024-01-07

当一个页面被嵌入到 another 页面的 iframe 内时，可能会出现 iframe 内有一个滚动条，所以在某些情况下，你可能需要去除此滚动条。

当一个页面被嵌入到 another 页面的 iframe 内时，可能会出现 iframe 内有一个滚动条，所以在某些情况下，你可能需要去除此滚动条。

去除iframe内的滚动条

通过在 iframe 中添加 scrolling="no" 属性可以禁用滚动条：

<iframe src="example.html" scrolling="no"></iframe>

在上面的示例中，当页面在 iframe 中加载时，将禁用 iframe 的滚动条。

但是，请注意，scrolling="no" 属性已被 HTML5 标准废弃，并且在某些浏览器中可能不起作用。因此，使用 CSS 是更好和更可靠的方法。

可以在 CSS 中为 iframe 包含的文档设置一个样式，以禁用其滚动条：

<style>
  iframe {
    overflow:hidden;
  }
</style>
<iframe src="example.html"></iframe>

在上面的示例中，我们通过设置 overflow 样式为 hidden 去除了 iframe 中的滚动条。此方式更为通用，在不同浏览器上的效果更为一致。

另外，还有一种方法利用 JavaScript 去掉 iframe 内的滚动条条。

<iframe id="my-iframe" src="example.html"></iframe>
<script>
  let iframe = document.getElementById('my-iframe');
  iframe.onload = function() {
    let body = iframe.contentWindow.document.body;
    body.style.overflow = 'hidden';
  };
</script>

在上面的示例中，创建了一个带有指定 ID 的 iframe，然后在 iframe 加载完成后，使用 JavaScript 获取文档中的 <body> 元素，并将其样式中的 overflow 属性设置为 hidden，从而禁用了滚动条。

保留iframe内的滚动条

保留 iframe 内的滚动条是默认行为，只需要添加或者不添加 scrolling 属性即可。

<iframe src="example.html"></iframe>

在上面的示例中，当 iframe 中的文档内容大小超过 iframe 元素可以容纳的大小时，会在 iframe 中显示滚动条。

需要注意的是，这里默认情况下，仅当在嵌入页面 HTML 代码中未指定 scrolling 属性时才会显示滚动条。如果指定了 scrolling="no" 属性，则也会将滚动条禁用。

沃梦达教程

本文标题为：JavaScript中关于iframe滚动条的去除和保留

上一篇：详解微信小程序胶囊按钮返回|首页自定义导航栏功能

下一篇： JavaScript SHA512&SHA256加密算法详解

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX