jquery 选择 iframe 孩子答案

【问题标题】：jquery select iframe childrenjquery 选择 iframe 孩子
【发布时间】：2011-02-23 00:15:36
【问题描述】：

我正在使用 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) 因此该功能的其余部分工作它只是它没有拿起 iframes textarea keydown

有什么想法吗？谢谢

【问题讨论】：

男孩们，我知道它不起作用，但我只是把它作为演示......但没有一个答案对我有用。我想知道 editArea 是否停止了传播或类似的事情？
iframe 是否与父页面指向同一个域？
是的，它在同一个域上，它没有 src attr <iframe frameborder="0" name="frame_ettellCode" id="frame_ettellCode" style="border-width: 0px; overflow: hidden; display: inline; width: 100%; height: 100%;"></iframe>

标签： javascript jquery

【解决方案1】：

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

【讨论】：

应该注意 .contents() 仅适用于您在同一个域中
如果不在同一个域中怎么办？至少可以使用在该 iframe 中单击的元素来触发父窗口中的某些内容吗？
另一种语法：$("textarea", $("iframe").contents()).keydown(...)
如果您在浏览器上加载静态 html 文件，.contents() 也不起作用。

【解决方案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...');
    }
});

【讨论】：

【解决方案3】：

你可以旅行任何级别，以上答案是正确的。我做了如下

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

你可以使用访问父母

window.parent.parent. // upto any level

【讨论】：

【解决方案4】：

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

【讨论】：

这就像一个魅力。示例：使用document.querySelector('#test_frame').contentWindow.document 而不仅仅是document。详情请见HTMLIFrameElement.contentWindow - MDN web docs。

【解决方案5】：

你应该这样做


iframeDoc = document.getElementById('resultsFrame').contentWindow;
// result frame is id of iframe
$(iframeDoc).keydown(function(e))
{
// your functionality here
}

【讨论】：

【解决方案6】：

如果一切都失败了，我最终通过包装这个函数来完成上述工作：

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

【讨论】：

【解决方案7】：

下面的代码帮助了我。

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

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

});

【讨论】：