javascript - iframe 禁用选项卡上的滚动

标签 javascript html css iframe

我有一个如下所示的 iframe:

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.w3schools.com" style = 'height:100px;width:200px;' scrolling = 'no'>
  <p>Your browser does not support iframes.</p>
 </iframe>

</body>
</html>

因此,当我在 iframe 中按 Tab 键时,它会遍历所有链接,自动滚动到 iframe 中网站的底部。我想要做的是制作 iframe,以便仅在高度 = 100px、宽度 = 200px 的矩形框内使用该选项卡,并忽略网站上的所有其他内容...基本上剪辑不适合此矩形的所有其他内容...

我尝试设置高度和宽度以及 overflow:hidden,但这似乎并不能解决问题。

最佳答案

这会阻止用户单击 iframe 中的任何内容,但出于某种原因,您仍然可以单击内部并通过 Tab 键浏览 :-( fiddle

<div id="IframeWrapper" style="position: relative;">
    <div id="iframeBlocker" style="position: absolute; top: 0; left: 0; width: 400px; height: 200px"></div>
    <iframe src="http://www.w3schools.com" style='height:200px;width:400px;' scrolling='no'>
        <p>Your browser does not support iframes.</p>
    </iframe>
</div>

关于javascript - iframe 禁用选项卡上的滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23524270/

相关文章:

javascript - 如何将数组变成对象的对象

javascript - 为什么当子元素未定义事件但父元素定义了事件时,为什么会触发子元素的剂量事件

html - 强制一个 div 变得比浏览器窗口更宽

css - 计算缩放值以转换 iframe 以覆盖其在视口(viewport)中的内容

css - 如何删除 css 菜单上按钮之间的空格

javascript - d3 selectAll 困惑

javascript - 类型错误 : Cannot read property 'match' of undefined when using useParams from react-router

php - Javascript/PHP 中的 HTML 验证器? (不一定是 XML)

javascript - setTimeout 与 jQuery.hover() 重叠

html - 使用 css 在 ul 中定位特定的 M3