2010-01-11 8 views
5

Il existe un menu arborescent dans mon application et un clic sur les éléments du menu charge une URL dans un iFrame. J'aime mettre l'accent sur un élément de la page chargé dans l'iFrame.Définition du focus sur un iFrame dans IE

J'utilise ce code, et cela fonctionne parfaitement dans tous les navigateurs sauf IE:

var myIFrame = $("#iframeName"); 
myIFrame.focus(); 
myIFrame.contents().find('#inputName').focus(); 

J'ai essayé toutes les différentes options comme l'utilisation de setTimeout, mais aucune chance.

Après le chargement de la page, lorsque je clique sur la touche de tabulation, elle passe à la deuxième entrée, ce qui signifie qu'elle a été sur la première entrée, mais elle ne montre pas le curseur! J'utilise ExtJS et le plugin ManagedIFrame.

Toute aide est appréciée.

+0

est l'URL iFrame d'un autre domaine que la fenêtre principale? Il y a des soucis de domaine de sécurité avec cela, et IE se comporte un peu différemment. En outre, ce code est-il emballé pour s'exécuter sur un document prêt ou seulement sur la page? –

+0

Il charge la page à partir du même domaine. Oui, le code est emballé dans le document prêt. Il fonctionne réellement sur FireFox, Safari et Chrome, pas sur IE. –

Répondre

3

L'iFrame est-il visible ou affiché plus tard? Les éléments sont créés dans un ordre différent qui est la base de l'approche setTimeout. Avez-vous essayé un temps d'attente de haute valeur sur un délai d'attente défini?

Essayez quelque chose comme au moins une demi-seconde pour tester ... IE a tendance à faire les choses dans un ordre différent, donc un délai d'attente élevé peut être nécessaire pour obtenir de ne pas tirer jusqu'à rendre/finitions de peinture:

$(function(){ 
    setTimeout(function() { 
    var myIFrame = $("#iframeName"); 
    myIFrame.focus(); 
    myIFrame.contents().find('#inputName').focus(); 
    }, 500); 
}); 
+0

Eh bien, je l'ai même essayé avec 1000 auparavant. Une chose de plus qui peut aider, il montre le curseur pendant un moment, et le curseur disparaît immédiatement! Comme je l'ai dit dans la question, après avoir appuyé sur l'onglet, il va à la boîte de saisie suivante. Il n'affiche simplement pas le curseur. En outre, le iframe est visible onload, mais définit le src plus tard, chaque fois que l'utilisateur clique sur un élément de menu. –

+0

Vous vous concentrez à chaque fois que iframe src change? –

+0

Oui, je le suis. Il définit le focus juste après l'événement documentloaded chaque fois. –

4

Vous devez appeler la méthode focus() de l'objet window de l'iframe, pas l'élément iframe. Je ne suis pas expert en jQuery ou ExtJS, donc mon exemple ci-dessous n'utilise ni l'un ni l'autre.

function focusIframe(iframeEl) { 
    if (iframeEl.contentWindow) { 
     iframeEl.contentWindow.focus(); 
    } else if (iframeEl.contentDocument && iframeEl.contentDocument.documentElement) { 
     // For old versions of Safari 
     iframeEl.contentDocument.documentElement.focus(); 
    } 
} 
+3

Je l'ai essayé et ça n'a pas marché. –

1

Difficile à résoudre sans un exemple de travail, mais vous pouvez essayer de cacher et de montrer l'entrée et, pour forcer IE à redessiner l'élément.

Quelque chose comme:

var myIFrame = $("#iframeName"); 
myIFrame.focus(); 
myIFrame.contents().find('#inputName').hide(); 
var x = 1; 
myIFrame.contents().find('#inputName').show().focus(); 

Cela pourrait secouez IE dans l'affichage du curseur.

0

je pouvais obtenir IE de se concentrer un champ d'entrée dans un iframe avec:

iframe.focus(); 
var input = iframe... 
input.focus(); 
iframe.contentWindow.document.body.focus(); 
input.focus();