La mise au point pour le contenu de l'iframe

J'ai une page avec un document.onkeydown gestionnaire d'événements, et je suis le charger à l'intérieur d'une iframe dans une autre page. Je dois cliquer à l'intérieur de l'iframe pour obtenir le contenu de la page pour lancer "à l'écoute".

Est-il une manière que je peux utiliser JavaScript dans le bord extérieur de la page pour définir le focus à l'intérieur de la page, donc je n'ai pas de cliquer à l'intérieur de l'iframe?

EDIT: réponse à un commentaire:

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

Je ne suis pas actuellement à la recherche de "setFocus" dans le sens traditionnel du terme, comme autant "d'activer les gestionnaires d'événements sur l'iframe contentDocument"

  • Pouvez-vous fournir plus de contexte? Êtes-vous en tapant dans la fenêtre principale et d'attendre que le texte apparaisse (sous une forme ou une autre) dans votre iframe? Cela est pertinent, car le réglage de la focalisation à l'intérieur de votre iframe pourrait interférer avec les utilisateurs de taper dans la fenêtre principale.
InformationsquelleAutor Jimmy | 2008-12-15
  1. 54

    J'ai eu un problème similaire avec le jQuery Thickbox (une boîte de dialogue de type widget). La façon dont j'ai résolu mon problème est comme suit:

    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 le setTimeout(). Basé sur mes tests, cela fonctionne dans les Firefox3.5, Safari4, Chrome4, IE7 et IE6.

    • bizarre, mais vrai - il vraiment ne fonctionne qu'avec le setTimeout! allez comprendre...
    • Je suppose que c'est parce que: l'iframe a la fin du chargement et B: safari a (avait?) un bug à ce sujet et nécessite un setTimeout d'au moins 1
    • Merci pour le partage. Fonctionne très bien.
    • Bon appel sur le settimeout. Je trouve settimeout lisse beaucoup de problèmes avec le code d'événement à sortir... je suppose que c'est parce que le code est exécuté dans le milieu de la navigateur de la gestion des événements, et le settimeout, il sort et il s'exécute après l'événement, tout est fait.
    • Dans FF ne fonctionne pas sans setTimeout.
    • pourquoi est ici iframe[0] pris comme un indice de tableau?

    InformationsquelleAutor cheeming
  2. 18

    À l'aide de la contentWindow.focus() la méthode, le délai d'attente est probablement nécessaire d'attendre l'iframe pour être complètement chargées.

    Pour moi, également à l'aide de l'attribut onload="this.contentWindow.focus()" fonctionne avec firefox, dans la balise iframe

    • À l'aide de cette solution combinée avec Jaime la suggestion de là-bas a résolu mon problème dans au moins mozilla et les navigateurs webkit. Toujours en train de vérifier IE...
    InformationsquelleAutor danza
  3. 6
    document.getElementsByName("iframe_name")[0].contentWindow.document.body.focus();
    • ne semble pas fonctionner pour moi
    • Une légère variation sur cette solution a fonctionné dans mon projet. Ma version était: this.iframe[0].contentWindow.document.body.focus(); Mais j'ai dû modifier cette façon de travailler dans le plugin que j'utilise.
    InformationsquelleAutor Jaime Febres
  4. 4

    Essayer d'écoute pour les événements dans le document d'origine et de passer l'évènement à un gestionnaire dans l'iframe document.

    InformationsquelleAutor Liam
  5. 3

    j'ai eu un problème similaire où j'étais en essayant de se concentrer sur un txt dans un iframe chargé à partir d'une autre page. dans la plupart des cas, il fonctionne. Il y a un problème là où il mettrait le feu dans FF lors de l'iFrame a été chargé, mais avant c'était visible. de sorte que l'objet ne semblait pas être réglé correctement.

    j'ai travaillé autour de ce avec un similaires solution à cheeming la réponse 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();
    InformationsquelleAutor nate_weldon
  6. 1

    J'ai découvert que FF déclenche les événements de focus pour les iframe.contentWindow mais pas pour les 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 d'obtenir des choses de travail.
    Peut-être que cela aide quelqu'un ...

    InformationsquelleAutor mile
  7. 1

    Voici le code pour créer un iframe à l'aide de jQuery, ajouter le document, sondage jusqu'à ce qu'il est chargé, puis se concentrer sur elle. C'est mieux que le réglage de l'arbitraire d'un délai d'attente qui peut ou peut ne pas fonctionner en fonction de combien de temps l'iframe de chargement.

    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 de détection lorsque l'iframe est chargé a été adapté à partir Biranchi's réponse à Comment vérifier si iframe est chargé ou s'il a un contenu?

    InformationsquelleAutor Stephen Ostermiller
  8. 0

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

    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 a également fait défiler vers le bas de son contenu. Suppose que je devrais être en insérant le mannequin zone de texte en haut.

    InformationsquelleAutor Jimmy