如何使用 JavaScript 将事件侦听器添加到框架 window？

Question

我正在尝试为结构如下的网站编写 chrome 扩展程序：

<html>
<head>
    ....
</head>
<frameset>
    <frame>
        ....
    </frame>
    <frameset>
        <frame>
            <html>
                <head>
                </head>
                <body>
                    <select id="theThingIWant"></select>
                </body>
            </html>
        </frame>
        <frame>
            ....
        </frame>
    </frameset>
</frameset>
</html>

我知道这看起来很疯狂，但它是很久以前制作的，而且它是我在工作中必须使用的东西。我正在尝试访问该 select 元素，但我能够这样做的唯一方法是向检查 [=18] 的 window 对象添加 click 侦听器=] 以确保 id 是我要查找的内容。

理想情况下，我想在按下 Tab 键的 keydown 事件之后触发一个函数，然后基本上做同样的事情，但我似乎无法触发侦听器，无论我在哪里尝试附加它。

我的点击事件，它做了我想要的：

window.addEventListener('click', function(e) {
    if (e.target.id === 'selAxisViaAEHybridContent')
        remove_content_IDs(e.target);
});

我的 keydown 事件不起作用（控制台日志从未发生）：

window.addEventListener('keydown', function(e) {   
    console.log(e);
});

我可以使用 document.getElementsByTagName('frameset')[1].children[0] 访问 select 元素所在的 frame，但是 .children 属性是一个空数组.当我将 keydown 事件附加到该节点时，它仍然不起作用。有谁知道我能做些什么来解决这个问题？最终，当通过 Tab 键聚焦 select 元素时，我想运行 remove_content_IDs()。

Answer 1

要在 iframe 中绑定 keydown，请使用 iframe 的 contentWindow 属性。

这可能会有帮助。

var ifr = document.getElementsByTagName("iframe")[0];
var ifr_window = ifr.contentWindow;
ifr_window.addEventListener("keydown", function(e){
    console.log("clicked ", e.keyCode);
});

如何使用 JavaScript 将事件侦听器添加到框架 window？

How to add event listeners to frame window using JavaScript?

html

frame

keydown

addeventlistener