iframe disable scrolling on tab

Question

I have an iframe that looks like this:

<!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>

so when I press tab in the iframe, it traverses through all the links , automaticall scrolling all the way to the bottom of the site that's in the iframe. What I want to do is make the iframe so that tab only within the rectangle box where height = 100px, width = 200px and ignore everything else on the site...basically clip everything else that doesn't fit into this rectangle...

I tried setting height and width and also overflow:hidden, but that doesn't seem to do the trick.

no but it tabs through everything on the w3schools site. what i want is for it to be only be able to tab through whatever is showing in the 200px X 100px window. any links on w3schools site that do not fall into this window should not be focused at all on tabbing. — Ashesh, May 07 '14 at 17:35
Please provide a JSFiddle example, this http://jsfiddle.net/7ky5y/ seems to work — Itay Gal, May 07 '14 at 17:37
Afaik the only way to affect tabbing order, is to set [`tab-index`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex). Since you've a [cross-domain page](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) in your `iframe`, there's nothing you can do. — Teemu, May 07 '14 at 17:44

score 0 · Answer 1 · answered May 07 '14 at 17:59

This blocks user from being able to click on anything in the iframe but for some reason, you can still click inside and tab through :-( 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>

also tried setting `tab-index:-1` to both iframe and a wrapping div to no avail — MilkyTech, May 07 '14 at 18:01

score 0 · Answer 2 · edited May 23 '17 at 12:20

You can't do anything about it, but instead you can run a JS on iframe load which cam hide the html contents from your iframe which you don't want to be displayed

you can refer to these similar questions to get the idea:

And there's a similar discussion on jQuery forums here: https://forum.jquery.com/topic/changing-elements-in-an-iframe

iframe disable scrolling on tab

2 Answers2