Đặt tiêu điểm thành nội dung iframe

Question

Tôi có một trang có trình xử lý sự kiện document.onkeydown và tôi đang tải trang đó trong khung nội tuyến trong một trang khác. Tôi phải bấm vào bên trong khung nội tuyến để có được trang nội dung để bắt đầu "nghe".

Có cách nào tôi có thể sử dụng JavaScript ở trang bên ngoài để đặt trọng tâm vào trang bên trong để tôi không phải nhấp vào bên trong khung nội tuyến không?

EDIT: Đáp lại bình luận:

Bối cảnh là cửa sổ chính là một hệ thống ánh sáng giống như chiếc hộp, ngoại trừ thay vì hình ảnh, nó cho thấy iframe, và mỗi iframe là một trang tương tác với KeyDown/xử lý MouseMove . các trình xử lý này không kích hoạt cho đến khi tôi nhấp vào iframe sau khi hiển thị hộp đèn.

Tôi không thực sự tìm cách để "SetFocus" theo nghĩa truyền thống càng nhiều càng tốt "cho phép xử lý sự kiện trên contentDocument iframe"

Answer 1

Tôi gặp sự cố tương tự với jQuery Thickbox (tiện ích hộp thoại kiểu hộp đèn). Cách tôi khắc phục sự cố của mình như sau:

function setFocusThickboxIframe() { 
    var iframe = $("#TB_iframeContent")[0]; 
    iframe.contentWindow.focus(); 
} 

$(document).ready(function(){ 
    $("#id_cmd_open").click(function(){ 
     /* 
     run thickbox code here to open lightbox, 
     like tb_show("google this!", "http://www.google.com"); 
     */ 
     setTimeout(setFocusThickboxIframe, 100); 
     return false; 
    }); 
}); 

Mã này dường như không hoạt động mà không có setTimeout(). Dựa trên thử nghiệm của tôi, nó hoạt động trong Firefox3.5, Safari4, Chrome4, IE7 và IE6.

Answer 2

document.getElementsByName("iframe_name")[0].contentWindow.document.body.focus(); 

Answer 3

Cố gắng lắng nghe cho các sự kiện trong tài liệu phụ huynh và thông qua sự kiện này để một trình xử lý trong tài liệu iframe.

Answer 4

Đây là điều mà làm việc cho tôi, mặc dù nó có mùi một sai chút:

var iframe = ... 
var doc = iframe.contentDocument; 

var i = doc.createElement('input'); 
i.style.display = 'none'; 
doc.body.appendChild(i); 
i.focus(); 
doc.body.removeChild(i); 

hmmm. nó cũng cuộn xuống cuối nội dung. Đoán tôi nên chèn hộp văn bản giả ở trên cùng.

Answer 5

Sử dụng phương thức contentWindow.focus(), thời gian chờ có thể là cần thiết để chờ khung nội tuyến được tải hoàn toàn.

Đối với tôi, cũng sử dụng thuộc tính onload="this.contentWindow.focus()" công trình, với firefox, vào thẻ iframe

Answer 6

tôi phát hiện ra rằng FF gây nên sự kiện tập trung cho iframe.contentWindow nhưng không phải cho iframe.contentWindow.document. Ví dụ: Chrome có thể xử lý cả hai trường hợp. vì vậy, tôi chỉ cần liên kết trình xử lý sự kiện của mình với iframe.contentWindow để làm cho mọi thứ hoạt động. Có thể điều này giúp ai đó ...

Answer 7

tôi đã gặp sự cố tương tự khi tôi cố gắng tập trung vào khu vực txt trong khung nội tuyến được tải từ một trang khác. trong hầu hết các trường hợp, nó hoạt động. Có một vấn đề mà nó sẽ cháy trong FF khi iFrame được tải nhưng trước khi nó được nhìn thấy. do đó, tiêu điểm dường như không bao giờ được đặt chính xác.

tôi làm việc xung quanh này với một giải pháp simular để trả lời cheeming của trên

var iframeID = document.getElementById("modalIFrame"); 
//focus the IFRAME element 
$(iframeID).focus(); 
//use JQuery to find the control in the IFRAME and set focus 
$(iframeID).contents().find("#emailTxt").focus(); 

Answer 8

Đây là mã để tạo ra một khung nội tuyến sử dụng jQuery, thêm nó vào tài liệu, thăm dò ý kiến ​​cho đến khi nó được nạp, sau đó tập trung vào nó. Điều này tốt hơn là đặt thời gian chờ tùy ý có thể có hoặc không hoạt động tùy thuộc vào thời gian tải iframe.

var jqueryIframe = $('<iframe>', { 
    src: "http://example.com" 
}), 
focusWhenReady = function(){ 
    var iframe = jqueryIframe[0], 
    doc = iframe.contentDocument || iframe.contentWindow.document; 
    if (doc.readyState == "complete") { 
     iframe.contentWindow.focus(); 
    } else { 
     setTimeout(focusWhenReady, 100) 
    } 
} 
$(document).append(jqueryIframe); 
setTimeout(focusWhenReady, 10); 

Mã để phát hiện khi iframe được nạp được chuyển thể từ Biranchi 's câu trả lời cho How to check if iframe is loaded or it has a content?