Javascript - 在 iframe 中输入更改事件答案

【问题标题】：Javascript - Input change events inside iframesJavascript - 在 iframe 中输入更改事件
【发布时间】：2013-08-15 11:07:50
【问题描述】：

是否可以检测 iframe 内的输入更改事件？

代码必须是纯 Javascript 并且位于 iframe 之外。每次我在 iframe 内输入一个输入字段时，该函数都需要触发 - 这可能吗？？

【问题讨论】：

标签： javascript iframe

【解决方案1】：

试试这个代码：

window.onload = function() {
    var iframe = document.getElementsByTagName('iframe')[0];
    iframe.onload = function() {
        var input = iframe.contentDocument.getElementsByTagName('input')[0];
        input.addEventListener('keypress', function() {
            // wait until key is entered into input box
            setTimeout(function() {
                console.log(input.value);
            }, 10);
        }, false);
    };
};

【讨论】：

有什么方法可以使用 'change' 事件或 onchange 或类似的东西 - 这样我就可以在没有按键的情况下捕捉到正在更改的输入 - 东西会动态添加到输入中。
@user1775598 存在“更改”事件，但不会在按键上触发，而是在内容更改时模糊（在 Google Chrome 中，不知道其他浏览器）。如果您使用 javascript 设置值，也不会触发更改事件。
如果输入的值是通过 Javascript 动态设置的，有什么方法可以捕捉到输入的变化？
@user1775598 我不这么认为，除非您创建一个设置值的函数并且该函数执行一个事件。

【解决方案2】：

如果您在同一个域上工作，则可以访问 iframe。

document.getElementById('yourIframe').contentWindow.document.findElementsByTagName('input')[0].onkeyup = function () {
    console.log('Input has changed.');
};

如果您在不同的域中，最好使用此处描述的 postMessage API：http://davidwalsh.name/window-postmessage 这个解决方案的结果是，你必须在 iframe 和父框架的两边都写 JS。

【讨论】：

他说纯Javascript
对不起。我解决这个问题。但同样的原产地政策问题仍然存在。

【解决方案3】：

document.getElementById('rw_iframe').contentWindow.document.getElementById("fieldID").onchange = function () {
                
};

使用jquery改变当前上下文，只要你使用js给iframe元素附加一个事件就可以了

【讨论】：