Définition du focus au contenu iframe

Question

J'ai une page avec un gestionnaire d'événements document.onkeydown et je la charge dans un iframe dans une autre page. Je dois cliquer à l'intérieur de l'iframe pour que la page de contenu commence à "écouter".

Y a-t-il un moyen d'utiliser JavaScript dans la page externe pour définir le focus sur la page interne afin de ne pas avoir à cliquer à l'intérieur de l'iframe?

EDIT: réponse au commentaire:

Le contexte est la fenêtre principale est un système de boîte de lumière, sauf au lieu d'images, il montre iframes, et chaque iframe est une page interactive avec des gestionnaires de keydown/mousemove . ces gestionnaires ne tirent pas jusqu'à ce que je clique dans l'iframe après avoir montré le light-box-chose.

Je cherche pas vraiment à « setFocus » au sens traditionnel autant que « permettre aux gestionnaires d'événements sur le iframe contentDocument »

Answer 1

J'ai rencontré un problème similaire avec jQuery Thickbox (un widget de boîte de dialogue de style lightbox). La façon dont je fixe mon problème est la suivante:

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; 
    }); 
}); 

Le code ne semble pas fonctionner sans setTimeout(). Basé sur mes tests, il fonctionne dans Firefox3.5, Safari4, Chrome4, IE7 et IE6.

Answer 2

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

Answer 3

Essayez d'écouter des événements dans le document parent et passer l'événement un gestionnaire dans le document iframe.

Answer 4

C'est quelque chose qui a fonctionné pour moi, même si ça sent un mal de bits:

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. il fait également défiler vers le bas du contenu. Je suppose que je devrais insérer la zone de texte fictive en haut.

Answer 5

En utilisant la méthode contentWindow.focus(), le délai d'attente est probablement nécessaire pour attendre que l'iframe soit complètement chargé.

Pour moi, aussi en utilisant l'attribut onload="this.contentWindow.focus()" fonctionne avec Firefox, dans la balise iframe

Answer 6

J'ai découvert que FF déclenche l'événement de mise au point pour iframe.contentWindow mais pas pour iframe.contentWindow.document. Chrome par exemple peut gérer les deux cas. Donc, j'ai juste besoin de lier mes gestionnaires d'événements à iframe.contentWindow afin de faire fonctionner les choses. Peut-être que cela aide quelqu'un ...

Answer 7

J'ai eu un problème similaire où j'essayais de se concentrer sur une zone txt dans un iframe chargé à partir d'une autre page. dans la plupart des cas, cela fonctionne. Il y avait un problème où il se déclencherait en FF lorsque le iFrame a été chargé mais avant qu'il ne soit visible. donc l'accent n'a jamais semblé être réglé correctement.

j'ai travaillé autour de ce avec une solution Simular à la réponse de Cheeming ci-dessus

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

Voici le code pour créer un iframe en utilisant jQuery, l'ajouter au document, sondage jusqu'à ce qu'il soit chargé, puis la concentrer. Cela vaut mieux que de définir un délai arbitraire qui peut ou ne peut pas fonctionner en fonction de la durée de chargement de l'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); 

Le code pour détecter quand l'iframe est chargé a été adapté de la réponse de » Biranchi à How to check if iframe is loaded or it has a content?