To simulate a manual click, not an auto one

After all, there is some difference in the way we ‘click’ using our mouse at some place in the document, and what can be achieved by the dispatchEvent “click” in Firefox.

We have a page, which has two iFrames on whole. Left frame having a table of clickable email subjects, and right frame showing the entire body of the selected email. The problem is, the clickable area on the subject is too small, making it a pain to click each email to see its body. So I implemented a way of navigating through them using keyboard in the parent page(using key handlers in Javascript). The problem is, when we load the page for first, the navigation works fine, since the focus is on the parent page. But as soon as someone clicks on any area on the two iFrames, the key handlers don’t work because they are in the parent page, not in that frame.

I noticed that when I click on any area outside the two frames, it works again. Idea : “Why not do a setTimeOut or setInterval sort of thing, which just sits and keeps on clicking on a place outside the frames”? Good idea, but doesn’t work. Why? Is installing the same kind of key handlers in both the frames the only other way? Even setting focus on an element on the parent page doesn’t work. Please help.

Thanks !

I think the obvious question is, why use these iframes? Not using iframes would solve this problem instantly.

Another one is, why not change the CSS so that the subjects are easier to click?

How do you know what users are going to do? Do you know that any of them even bother cycling through them using the keyboard?

Take a look at the code www.addshield.com uses to protect ads using a javascript include. They use all the onmouseover events etc. There may lie your answer.

I dynamically inserted my key handlers in the page using onkeyup and onkeydown, but as soon as I click in any of the frame, it captures the keyboard

why iframes suck when you’re mouseless. Like Flash, they steal your keyboard.

So I just want to know a simple way of setting the focus back on the parent page programmatically, so that it can start receiving keyboard events again. Even the function ‘element.focus()’ is unable to do this.

This might be way outta ballpark but I’ve been reading about ARIA recently and while it’s for accessibility, it does extend what tabindex does…

Specifically, setting a negative tabindex (usually -1) to things you’d like to be able to focus on would allow you to use JS to set focus on that item (and it can be any kind of item, not a traditionally-clickable item like anchors or inputs).
http://dev.opera.com/articles/view/introduction-to-wai-aria/
read from Keyboard Navigation or Adding to the Natural Tab Order onwards.

div id=“progaccess” tabindex=“-1”>

</div>
In this example, the div element is not placed in the tab order, but having a tabindex attribute value of -1 means that it can receive programmatic focus.

sounds promising.

I think you can do this all by itself so long as you guys use modern browsers. I really don’t know if IE6 goes along with this.

Again I’m also not sure if the problem has to do with really multiple documents on a single page and JS being restricted to the one page…

Wow ! Wonderful ! You are the savior ! Setting the tabindex property to -1 by a setAttribute made it ‘focusable’ and I was able to focus it every second, so that the keyboard events are always received by the parent page !! :slight_smile:

Thanks a lot !

Hi Raffles,
Thanks a lot for your response. The questions you ask are really important. To answer these though, I will have to give the details I deliberately left in the original question to make it simple.

The problem is - I’m not the developer of this page. It is our company’s internal webpage, which has this weird way of showing emails. I was just trying to correct these annoyances using GreasseMonkey. So these two iFrames I cannot change, though I can dynamically increase the ‘clickable’ area to make it easier to click. Even though, I would love to use keyboard for navigation, which is much easier. I dynamically inserted my key handlers in the page using onkeyup and onkeydown, but as soon as I click in any of the frame, it captures the keyboard :frowning:

I don’t know what other users would want, but the main user in this case is me :).

So I just want to know a simple way of setting the focus back on the parent page programmatically, so that it can start receiving keyboard events again. Even the function ‘element.focus()’ is unable to do this.