Discussion :

[fabsecad]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Amnell]

Bonsoir,

Si vous modifiez votre ligne evaluateJavaScript en changeant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

web_view.evaluateJavaScript(...

Par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var res = web_view.evaluateJavaScript(...
console.log("Result: " + res);

Que se passe-t-il ? De même, si vous changez :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Que se passe-t-il ?

Bonne soirée,
Louis

[fabsecad]

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

Merci en tout cas

[fabsecad]

Voici les résultats :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Amnell]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

=>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[fabsecad]

Arf oui désolé...

code corrigé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Amnell]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
                &lt;body&gt;&lt;a href="http://www.grardpresta.com/web/kigard/"&gt;Click here&lt;/a&gt;&lt;hr&gt;&lt;/body&gt;
            </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

[fabsecad]

J'ai ajouté le signal suivant pour voir si le Webview modifiait son url:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[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

[fabsecad]

ça se complique pour moi on dirait 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...

[Amnell]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ?

[Amnell]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ?

[Amnell]

Bonjour,

Le evaluateJavaScript dans votre onLoadFinished :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[Amnell]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[fabsecad]

Super je vais essayer

Pourrais je avoir une explication sur la ligne de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

s'il vous paît.

[Amnell]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

&& 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

/^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 :

Sélectionner tout - Visualiser dans une fenêtre à part

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

\.[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

[fabsecad]

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