jQuery选择iframe子元素

Question

我正在使用editArea库和jQuery来完成我需要的操作...

http://www.cdolivet.com/index.php?page=editArea&sess=2b8243f679e0d472397bfa959e1d3841

所以在我的HTML中有一个iframe标签，editArea使用它，我需要使用jQuery访问类似的东西。

$('iframe textarea').keydown(function (e){
   number = 17; //any number really :)
    if(e.which == number){
        //do something...
        alert('Done...');
    }
});

我尝试了上面的方法，但似乎它没有检测到那个键。但如果选择器是$(document)，它就能工作。 因此，函数的其余部分可以正常工作，只是它没有捕捉到iframe文本区域的按键事件。 有什么想法吗？ 谢谢。

- Val

---

伙计们，我知道它不起作用，但我只是把它作为演示放上去了...但是没有一个答案对我有用。我想知道editArea是否停止了传播或类似的东西？ - Val

iframe是否指向与父页面相同的域？ - Spencer Ruport

是的，它在同一域上，它没有src属性 <iframe frameborder="0" name="frame_ettellCode" id="frame_ettellCode" style="border-width: 0px; overflow: hidden; display: inline; width: 100%; height: 100%;"></iframe>。 - Val

Answer 1

$("iframe").contents().find("textarea").keydown(...)

- jAndy

---

请注意，.contents() 只在您位于相同域时可用。 - jake_feyereisen

如果一个不在相同的域名下，那么还能否至少使用在 iframe 中被点击的元素来触发父窗口中的某些操作？ - cbmtrx

另一种语法：$("textarea", $("iframe").contents()).keydown(...) - pholpar

另外，如果您在浏览器上加载静态HTML文件，则.contents()无法正常工作。 - h-rai

Answer 2

您需要在iframe的内部document中进行搜索，以获取textarea元素：

var textarea = $('textarea', $('iframe').get(0).contentWindow.document);
textarea.keydown(function (e){
   var number = 17;
   var code = (e.keyCode ? e.keyCode : e.which);

    if(code == number){
        //do something...
        alert('Done...');
    }
});

- Christian C. Salvadó

Answer 3

你可以前往任何级别。上面的答案是正确的。我按照以下方式操作：

var iframeMain = $("#iframe0").contents().find('#iframeMain');
var detailsForm = $(iframeMain).contents().find('#detailsform');

访问父级元素的方法如下：

window.parent.parent. // upto any level 

- Vins

Answer 4

您需要访问iframe的 contentWindow.document，而不是iframe本身。

- Sean Kinsey

---

这个方法非常有效。例如：使用 document.querySelector('#test_frame').contentWindow.document 而不是仅仅使用 document。详见 HTMLIFrameElement.contentWindow - MDN web docs。 - ynn

Answer 5

以下代码对我很有帮助。

$(document).ready(function(){
var iFrameDOM = $("iframe#frameID").contents();

iFrameDOM.find(".page").css("background-color", "#fff");

});

- Manveer Singh

Answer 6

如果所有其他方法都失败了，我最终通过将其包装在此函数中使其工作：

$(window).blur(function () {
  // genius code here
}

- Adam Grant

Answer 7

你应该这样做：

iframeDoc = document.getElementById('resultsFrame').contentWindow;
// result frame 是 iframe 的 id
$(iframeDoc).keydown(function(e))
{
// 在这里添加你的功能代码
}

- sushil bharwani