WebView : onFocus

Version imprimable

WebView : onFocus

Salut à tous.

J'utilise un Webview dans un QML pour afficher une page web.

Je dois faire apparaitre un clavier virtuel quand on clique sur un champ texte d'une page web, pour cela j'utilise l'event onfocus.

Cela fonctionne bien sauf pour certaines pages web, comme je n'y connais rien en html je ne vois pas d'où viens le problème.

Mon code fonctionne très bien ici : http://www.google.com par contre ne fonctionne pas ici : http://www.kigard.fr

Si vous avez une petite idée, merci de votre aide.

Voici le code de la Webview :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
WebView {
            id: web_view
            transformOrigin: Item.TopLeft
            url: "http://www.google.com"
            //url: "http://www.kigard.fr"                        
            x: 0
            y: 0
            width: 800
            height: 600
            preferredHeight: height
            preferredWidth: width
            settings.autoLoadImages: true
            settings.javaEnabled: true
            settings.pluginsEnabled: true
            settings.developerExtrasEnabled: true
            smooth: false            
            contentsScale: 1                                 
 
            onLoadFinished: {
                console.log("WebView onLoadFinished")
                web_view.evaluateJavaScript("var inputs = document.getElementsByTagName('INPUT');var index;for(index=0; index < inputs.length; index++){inputs[index].onfocus = function() {var active=document.activeElement;if(active.type=='text'){window.webbridge.showKeyboard(active.value)}}}")
            }            
 
            javaScriptWindowObjects: QtObject {
                WebView.windowObjectName: "webbridge"
 
                function showKeyboard(v)
                {
                    console.log("valeur "+v)
                }
            }
        }

13/10/2014, 20h24
Amnell
Bonsoir,

Si vous modifiez votre ligne evaluateJavaScript en changeant :

Code:

web_view.evaluateJavaScript(...

Par :
Code:

1 2 var res = web_view.evaluateJavaScript(... console.log("Result: " + res);
Que se passe-t-il ? De même, si vous changez :

Code:

var active=document.activeElement;if(active.type=='text')

Par :

Code:

var active=document.activeElement;if(active && (active.type=='text' || active.type == 'password'))

Que se passe-t-il ?

Bonne soirée,
Louis
14/10/2014, 13h39
fabsecad

J'essaye ça dès demain matin, j'espère que ça m'aidera.

Merci en tout cas :)

Voici les résultats :

Code:

1
2
var res = web_view.evaluateJavaScript("var inputs = document.getElementsByTagName('INPUT');var index;for(index=0; index < inputs.length; index++){inputs[index].onfocus = function() {var active=document.activeElement;if(active.type=='text'){window.webbridge.showKeyboard(active.value)}}}")
                console.log("Result: "+res)

avec google cela m'affiche Result: [object Object]

avec kigard cela m'affiche : Result: undefined

Code:

1
2
var res = web_view.evaluateJavaScript("var inputs = document.getElementsByTagName('INPUT');var index;for(index=0; index < inputs.length; index++){inputs[index].onfocus = function() {var active=document.activeElement;if(active && (active.type=='text' || active.type=='password'){window.webbridge.showKeyboard(active.value)}}}")
                console.log("Result: "+res)

avec les deux pages web cela m'affiche : Result: undefined

15/10/2014, 15h26
Amnell

Bonjour,

Vous avez oublié de copier la seconde parenthèse dans :

Code:

if(active && (active.type=='text' || active.type=='password')

=>

Code:

if(active && (active.type=='text' || active.type=='password'))

Cela devrait ainsi donner d'autres résultats que undefined.
Si cela donne la même chose, je pense pouvoir vous proposer autre chose.

Bonne journée,
Louis

Arf oui désolé...

code corrigé

Code:

1
2
var res = web_view.evaluateJavaScript("var inputs = document.getElementsByTagName('INPUT');var index;for(index=0; index < inputs.length; index++){inputs[index].onfocus = function() {var active=document.activeElement;if(active && (active.type=='text' || active.type=='password')){window.webbridge.showKeyboard(active.value)}}}")
                console.log("Result: "+res)

pour google cela me donne : Result: [object Object]

pour kigard cela me donne : Result: undefined

Bonsoir,

En testant, je me suis rendu compte que le HTML du site à la fin du chargement n'est pas le même que le HTML affiché :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"><html><head> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="generator" content="ORT - Ovh Redirect Technology"> <meta name="url" content="http://www.grardpresta.com/web/kigard/"> <meta name="robots" content="all"> </head> <frameset rows="100%,0" frameborder="no" border="0"> <frame name="ORT" src="http://www.grardpresta.com/web/kigard/"> <frame name="NONE" src="" scrolling="no" noresize=""> <noframes> <body><a href="http://www.grardpresta.com/web/kigard/">Click here</a><hr></body> </noframes> </frameset> </html>
Par conséquent, il est plutôt logique que cela ne fonctionne pas, vu qu'il n'y a pas de champ input dedans (d'où les undefined). Cependant, si vous chargez la page redirigée (http://www.grardpresta.com/web/kigard/), vous obtenez le bon résultat. Je ne saurais cependant dire comment traiter cela avec le WebView QML qui est plutôt limité. Peut-être que du JavaScript pourrait gérer un onRedirect ou quelque chose comme ça ?

Bonne soirée,
Louis

16/10/2014, 09h19
fabsecad
J'ai ajouté le signal suivant pour voir si le Webview modifiait son url:
Code:

1 2 3 onUrlChanged: { console.log("WebView onUrlChanged "+url) }
J'ai le résultat suivant:

WebView onUrlChanged http://www.kigard.fr
WebView onUrlChanged http://www.kigard.fr/

Hors d'après ce que vous me dites la vraie page est http://www.grardpresta.com/web/kigard/ (effectivement cela fonctionne avec cette url dans le Webview)

Le Webview est pas sensé recharger la page tout seul ?
16/10/2014, 15h08
Amnell

Bonjour,

De ce que je comprends, vu qu'il s'agit à l'intérieur de "frames" HTML, ce n'est pas vraiment une redirection mais plutôt le chargement d'une sous-vue du site redirigé, d'où l'absence de changement d'url. Par conséquent, il n'y a pas vraiment lieu de redirection, mais la frame n'est pas forcément tout de suite chargée. De ce fait, il vous faudra sans doute ajouter une nouvelle étape à votre evaluateJavaScript qui récupère toutes les frames et y intègre un onload pour y exécuter ce que vous avez actuellement dans votre evaluateJavaScript.

Bonne journée,
Louis
17/10/2014, 09h27
fabsecad

ça se complique pour moi on dirait :aie: vu que je ne maitrise vraiment pas le javascript.

En tout cas je comprends le cheminement que vous m'avez donné, merci bien.

Reste plus qu'à trouver comment coder tout ça...
17/10/2014, 17h36
Amnell

Bonjour,

De mon côté, je n'ai pas réussi à faire marcher cela. Ce que je faisais, c'était ceci :

Code:

var frames=document.getElementsByTagName('FRAME');var frameId;for(frameId=0; frameId < frames.length; frameId++){var inputs=frames[frameId].getElementsByTagName('INPUT');var index;for(index=0; index < inputs.length; index++){inputs[index].onfocus = function() {var active=document.activeElement;if(active.type=='text'||active.type=='password'){window.webbridge.showKeyboard(active.value)}}}}

Avec ou sans un unload, cela ne fonctionne pas. On récupère bien deux éléments dans "frames" mais il n'y a aucun moyen d'accéder à son contenu. J'ai essayé frames[frameId].document/contentDocument/contentWindow.document, etc., mais rien à faire, je récupère à chaque fois un undefined au lieu du résultat qui est attendu. Il s'agit apparemment d'une limitation de WebKit dans le cas de deux pages de deux domaines différents, pour des raisons de sécurité.

Bonne journée,
Louis
20/10/2014, 08h56
fabsecad

Bien tenté en tout cas :)

Puisqu'on sait qu'avec l'url complète cela fonctionne, est qu'on peut la récupérer une fois qu'une frame est finie de charger ?
20/10/2014, 14h55
Amnell

Bonjour,

Vous pourrez seulement en récupérer l'url :

Code:

var frames=document.getElementsByTagName('FRAME');var frameId;for(frameId=0; frameId < frames.length; frameId++){var scr = frames[frameId].getAttribute('src');}

Dans var src, vous aurez en théorie l'adresse de la frame, mais je ne saurais dire ce que vous pourrez en faire.

Bonne journée,
Louis
27/10/2014, 15h19
fabsecad

En fait ce qu'il nous faut c'est :

1) savoir si une frame est chargée
2) si oui, lire l'url contenue dans cette frame est l'affecter à notre WebView => le clavier doit donc s'afficher quand on clic dans un champ texte
3) si non, l'url doit être bonne => le clavier doit donc s'afficher quand on clic dans un champ texte

Vous pensez que c'est possible ?

Bonjour,

Le evaluateJavaScript dans votre onLoadFinished :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 var frameFound = false; var frames = document.getElementsByTagName('FRAME'); for (var frameId = 0; frameId < frames.length; ++frameId) { if (window.webbridge.load(frames[frameId].getAttribute('src'))) { frameFound = true; break; } } if (!frameFound) { var inputs = document.getElementsByTagName('INPUT'); for (var index = 0; index < inputs.length; ++index) { inputs[index].onfocus = function() { var active = document.activeElement; if (active && (active.type == 'text' || active.type == 'password')) { window.webbridge.showKeyboard(active.value); } } } }
Le load() qui vient s'ajouter dans le webbridge :
Code:

1 2 3 4 5 6 7 8 9 function load(frameUrl) { if (frameUrl && frameUrl.match(/^https?:\/\/[a-z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/)) { web_view.url = frameUrl; return true; } return false; }
Ce n'est cependant que du code théorique, je ne sais pas s'il va fonctionner. Le principe est que l'on récupère le src des frames si on en trouve, et on appelle avec chaque src le load() du webbridge. Si l'url est valide, on la charge, sinon on retourne false de sorte que le evaluateJavaScript tente de trouver une autre frame. Si aucune frame valide n'a été trouvée, on lance le JavaScript qui marchait pour détecter les inputs.

Bonne journée,
Louis

27/10/2014, 16h56
fabsecad

Super ça fonctionne !
Merci beaucoup pour votre aide :)

Par contre le seul souci c'est que je suis obligé d'écrire votre code sur une seule ligne sinon j'ai une erreur : SyntaxError: Parse error

ça fait une grande ligne de code bien indigeste 8O

Bonjour,

Coup de chance, dans ce cas, je pensais que je me serais planté quelque part.
Une alternative à la longue ligne serait de faire :
Code:

1 2 3 4 5 6 7 8 web_view.evaluateJavaScript("var frameFound = false; \ var frames = document.getElementsByTagName('FRAME'); \ for (var frameId = 0; frameId < frames.length; ++frameId) \ { \ if (window.webbridge.load(frames[frameId].getAttribute('src'))) \ { \ ... ");
C'est en général un peu plus visible (enfin, autant qu'une string multiline peut l'être).
J'espère juste que vous n'aurez pas de problème de redirection de frames sur la page contenant la même frame, ce serait un peu embêtant (je ne sais pas comment c'est géré par défaut par WebKit, mais bon, vous ne devriez pas rencontrer ça). Au pire, vous pourrez ajouter une condition dans le if (...match(...)) en ajoutant && frameUrl != web_view.url.

Bonne soirée,
Louis

28/10/2014, 08h47
fabsecad

Super je vais essayer :)

Pourrais je avoir une explication sur la ligne de code :

Code:

if (frameUrl && frameUrl.match(/^https?:\/\/[a-z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/))

s'il vous paît.
28/10/2014, 12h55
Amnell

Bonjour,

Code:

if (frameUrl

Cette partie signifie "Si frameUrl contient une variable définie et non nulle", donc si frameUrl contient au minimum une lettre. C'est une protection prévue au cas où frames[frameId].getAttribute('src') retournerait undefined, en l'absence d'un tel attribut.

Code:

&& frameUrl.match(/^https?:\/\/[a-z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/))

Il s'agit ici d'une expression régulière prévue pour capturer une url. Cette fonction va retourner false si jamais le schéma présent dans frameUrl ne correspond pas. Par exemple, si on regarde au tout début :

Code:

/^https?:\/\/

Le premier slash permet de préciser qu'il s'agit d'une expression régulière. Le ^ signifie que frameUrl doit commencer par ce qui suit, c'est à dire http. Étant donné qu'il y a un "?" derrière le "s", cela signifie qu'il peut y avoir 0 ou 1 "s" après http, ce qui laisse les possibilités http et https. On y ajoute le ":", puis "//". Les backslashs permettent juste d'échapper le caractère "/" pour préciser qu'il ne s'agit pas de la fin de l'expression. On a donc pour le moment soit http://, soit https://.

Code:

[a-z0-9-\.]+

Cela signifie qu'après http:// ou https:// peuvent se trouver 1 à n fois les caractères de 'a' à 'z', '0' à '9' ou un '.'. Par exemple : "http://www.example".

Code:

\.[a-z]{2,4}\/?

Signifie qu'il y a un "." suivi de 2 à 4 lettres de 'a' à 'z'. Exemple ".com", ce qui donne "http://www.example.com", avec de manière optionnelle un "/" après. La suite devient un peu plus longue, je ne saurais dire avec précision ce qu'elle capture même si j'ai quelques idées là-dessus. Je vous suggère d'aller consulter quelques cours d'expressions régulières si vous souhaitez en apprendre plus (cela peut par exemple être intéressant si vous cherchez à extraire un nombre d'une phrase, par exemple, en plus de valider des schémas).

Bonne journée,
Louis
29/10/2014, 09h38
fabsecad

C'est plus clair merci bien.
Sujet résolu pour moi :)