Comportement bizarre de WebKit [Résolu]

[Bibi218]

BOnjour à tous !

Aujourd'hui j'avais décidé de m'essayer à Webkit via PyQt, et j'aimerais ajouter quelques fonctionnalités à un site en le liant a mes widgets Qt.

J'avais commencé par essayer d'introduire du code JavaScript dans le html que j'avais extrait, avant de réintroduire le tout et l'afficher, mais j'ai des problèmes d'affichage que je n'arrive pas à expliquer. Pour faire simple, les images à l'intérieur des balises href sont toutes dupliquées.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
#
#
#
    def print_html(self):
        text = self.webView.page().mainFrame().toHtml()
        self.webView.setHtml(text, QtCore.QUrl("http://mixi.jp/"))
 
from PyQt4 import QtWebKit
 
if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    Form = QtGui.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    ui.webView.setUrl(QtCore.QUrl("http://mixi.jp/"))
    sys.exit(app.exec_())

Si quelqu'un pouvait m'expliquer à quoi ce comportement est dû...

[rambc]

Salut,
peux-tu mettre un ECM (ie un Exemple Complet Minimal) ?

[Bibi218]

No problemo

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
# -*- coding: utf-8 -*-
 
# Form implementation generated from reading ui file 'untitled.ui'
#
# Created: Sat Jul 18 00:32:48 2009
#      by: PyQt4 UI code generator 4.4.4
#
# WARNING! All changes made in this file will be lost!
 
from PyQt4 import QtCore, QtGui, QtWebKit
 
class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(808, 639)
        self.gridLayout = QtGui.QGridLayout(Form)
        self.gridLayout.setObjectName("gridLayout")
        self.webView = QtWebKit.QWebView(Form)
        self.webView.setUrl(QtCore.QUrl("about:blank"))
        self.webView.setObjectName("webView")
        self.gridLayout.addWidget(self.webView, 0, 0, 1, 2)
        spacerItem = QtGui.QSpacerItem(395, 20, QtGui.QSizePolicy.Expanding, QtGui.QSizePolicy.Minimum)
        self.gridLayout.addItem(spacerItem, 1, 0, 1, 1)
        self.buttonBox = QtGui.QDialogButtonBox(Form)
        self.buttonBox.setStandardButtons(QtGui.QDialogButtonBox.Cancel|QtGui.QDialogButtonBox.Ok)
        self.buttonBox.setObjectName("buttonBox")
        self.gridLayout.addWidget(self.buttonBox, 1, 1, 1, 1)
 
        self.retranslateUi(Form)
        QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL("rejected()"), Form.close)
        QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL("accepted()"), self.print_html)
        QtCore.QMetaObject.connectSlotsByName(Form)
 
    def retranslateUi(self, Form):
        Form.setWindowTitle(QtGui.QApplication.translate("Form", "Form", None, QtGui.QApplication.UnicodeUTF8))
 
    def print_html(self):
        text = self.webView.page().mainFrame().toHtml()
        self.webView.setHtml(text, QtCore.QUrl("http://mixi.jp/"))
 
if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    Form = QtGui.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    ui.webView.setUrl(QtCore.QUrl("http://mixi.jp/"))
    sys.exit(app.exec_())

Il suffit de cliquer sur OK pour voir le comportement bizarre à l'oeuvre.

[rambc]

En regardant le source de la page HTML, je suis tombé sur :

Code :

1
2
3
<noscript>
<iframe src="http://n3.ads.mixi.jp/hserver/SITE=login/AREA=NEWTARGETING.BANNER/AAMSZ=468X60/GENDER=S2/AGE=1/PREF=13/OCC=1/PARA=101/LC=0/JCC=0/MID=0/NDCC=0/ECHO=0/ACC_RANDOM=83871470" noresize="noresize" scrolling="no" hspace="0" vspace="0" frameborder="0" marginheight="0" marginwidth="0" width="468" height="60" allowTransparency="true"></iframe>
</noscript>

Cela peut être une piste mais très franchement je lance cela comme ça. Il faudrait en fait faire une page HTML la plus simple possible qui reproduise le souci car ta page HTML est monstrueuse.
Si j'avais à tester je regarderais d'abord du côté de ce <noscript>.

[Bibi218]

Problème résolu pour les images dupliquées, cela semble venir de la balise <iframe>.

Maintenant, j'essaie d'appeler mes méthodes Python depuis Javascript, mais pour une raison que j'ignore elles ne sont pas exécutées.

J'utilise le HTML suivant, venant de la démo Qt

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<html><script>
function extractFormValues()
{
    var firstName = document.getElementById("firstname").value;
    var lastName = document.getElementById("lastname").value;
 
    formExtractor.setValues(firstName, lastName);
}
</script><body>
<h1>
The Green People Book Club
</h1>
 
<p>
Welcome to The Green People Book Club. Please register to obtain a membership with us.
</p>
    <form onsubmit="extractFormValues()">
    <table>
    <tbody><tr>
        <td>
        First name:
        </td>
        <td>
            <input type="text" id="firstname">
        </td>
    </tr>
    <tr>
        <td>
        Last name:
        </td>
        <td>
            <input type="text" id="lastname">
        </td>
    </tr>
    <tr>
        <td>
        Gender:
        </td>
        <td>
        <input type="radio" name="gender" id="genderMale" value="Male"> Male
        <input type="radio" name="gender" id="genderFemale" value="Female"> Female
        </td>
    </tr>
    <tr>
        <td colspan="2">
        <input type="checkbox" id="updates" value="receive">
        Check here if you would like to receive regular updates from us:
        </td>
    </tr>
    </tbody></table>
    <input type="submit" value="Submit">
    </form>
 
</body></html>

et le code Python ci-dessous.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
class Ui_Form(QtCore.QObject):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(800, 600)
        self.gridLayout = QtGui.QGridLayout(Form)
        self.gridLayout.setObjectName("gridLayout")
        self.webView = QtWebKit.QWebView(Form)
        self.webView.setUrl(QtCore.QUrl("about:blank"))
        self.webView.setObjectName("webView")
        self.gridLayout.addWidget(self.webView, 0, 0, 1, 2)
        self.textBrowser = QtGui.QTextBrowser(Form)
        self.textBrowser.setMaximumSize(QtCore.QSize(16777215, 128))
        self.textBrowser.setObjectName("textBrowser")
        self.gridLayout.addWidget(self.textBrowser, 1, 0, 1, 2)
        self.label = QtGui.QLabel(Form)
        self.gridLayout.addWidget(self.label, 2, 0, 1, 2)
 
        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)
 
    def retranslateUi(self, Form):
        Form.setWindowTitle(QtGui.QApplication.translate("Form", "Form", None, QtGui.QApplication.UnicodeUTF8))
        self.label.setText("Test Javascript")
 
    def setValues(self, firstName, lastName):
        self.label.setText(" ".join([firstName, lastName]))
 
    def populate(self):
        self.webView.page().mainFrame().addToJavaScriptWindowObject("formExtractor", self);
 
 
from PyQt4 import QtWebKit
 
if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    Form = QtGui.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    # C'est bien connecte ici, j'ai verifie
    QtCore.QObject.connect(ui.webView.page().mainFrame(),
                           QtCore.SIGNAL("javaScriptWindowObjectCleared()"),
                           ui.populate)
    ui.webView.page().mainFrame().setHtml(html)
 
    # ca marche
    ui.webView.page().mainFrame().evaluateJavaScript('document.getElementById("firstname").value = "BEBERT"')
    # ca ne marche pas    
    ui.webView.page().mainFrame().evaluateJavaScript('formExtractor.setValues("oyo","mouah")')
    sys.exit(app.exec_())

Dans la doc Qt, il est dit que les Slots sont visibles depuis Javascript, donc j'ai supposé que le problème pouvait éventuellement venir de là, mais mes quelques tests n'ont pas été très concluants.

Est-ce que quelqu'un s'est déjà essayé à la chose en Python ?

[rambc]

Envoyé par Bibi218

Problème résolu pour les images dupliquées, cela semble venir de la balise <iframe>.

Tu as résolu le souci comment.

Envoyé par Bibi218

Maintenant, j'essaie d'appeler mes méthodes Python depuis Javascript, mais pour une raison que j'ignore elles ne sont pas exécutées.
Dans la doc Qt, il est dit que les Slots sont visibles depuis Javascript, donc j'ai supposé que le problème pouvait éventuellement venir de là, mais mes quelques tests n'ont pas été très concluants.
Est-ce que quelqu'un s'est déjà essayé à la chose en Python ?

J'avais essayé sans grand succès. Si tu arrives à quelque chose qui passe de Python à JavaScript, je suis preneur, mais aussi si tu arrives à passer de JavaScipt à Python car cela me semble tout aussi utile, voire plus utile.

[Bibi218]

J'ai viré la balise et ça marchait ^^

Sinon je viens de trouver ça sur une mailing list

QWebFrame's addToJavaScriptWindowObject() method lets you insert an instance
of a QObject subclass into the page. You can expose methods to JavaScript,
but you have to declare them as slots with the @pyqtSignature() decorator.

J'essaierai demain pour voir ce qu'il en est !!!

[Bibi218]

Je confirme, rajouter le décorateur
@QtCore.pyqtSlot(str, str)
au dessus de ma fonction setValues fait marcher le tout !!!

Je peux maintenant échanger des informations entre Python et Javascript !!!
Happy

Merci pour ton aide rambc !

[rambc]

Bravo.

Peux-tu mettre ici un exemple concret pas trop compliqué, ni trop simple de communication Python --> JavaScript et aussi JavaScript --> Python ? Cela pourrait me faire gagner pas mal de temps mais aussi à d'autres.

[Bibi218]

En fait mon exemple du dessus marche tel quel (en rajoutant le decorateur ou il faut).

Pour la communication JS > Python :
J'appelle depuis JS mon objet, que j'ai lie a la page via addToJavaScriptWindowObject.
Les methodes de mon objet sont accessibles en JS, a condition d'utiliser le decorateur.

Pour la communication Python > JS :
J'utilise juste la fonction evaluateJavaScript, qui prend en argument une chaine de caracteres.

On va pouvoir faire plein de trucs sympa avec ca !!!

[rambc]

Envoyé par Bibi218

En fait mon exemple du dessus marche tel quel (en rajoutant le decorateur ou il faut).:

En fait j'ai dû faire ceci :

Code :

1
2
3
    @QtCore.pyqtSlot(str, str)
    def setValues(self, firstName, lastName):
        self.label.setText(" ".join([str(firstName), str(lastName)]))

Envoyé par Bibi218

On va pouvoir faire plein de trucs sympa avec ca !!!

C'est pas mal du tout.

Je vais essayer de tester cela (quand j'aurais du temps) avec GeoGebra. L'idée est d'utiliser ce très bon logiciel de géométrie dynamique au sein d'une application PyQt. En espérant que cela fonctionne...

[Bibi218]

GeoGebra c'est pas une applet Java a la base ?

Le probleme avec ce systeme, c'est qu'il faut rajouter soit meme les bouts de JavaScript dans la page web, et donc editer le html correspondant dans le programme... pas vraiment pratique quand on ne maitrise pas ce qui se passe cote serveur

[rambc]

Envoyé par Bibi218

GeoGebra c'est pas une applet Java a la base ?

Le probleme avec ce systeme, c'est qu'il faut rajouter soit meme les bouts de JavaScript dans la page web, et donc editer le html correspondant dans le programme... pas vraiment pratique quand on ne maitrise pas ce qui se passe cote serveur

En fait mon idée est plus simple.

1. Je fais une appli PyQt avec dans un des dossiers une feuille HTML avec l'applet Java.
2. J'ajoute le code JavaScript dans la page HTML pour communiquer avec cet applet.
3. J'ajoute ensuite d'autres fonctions JavaScript pour la communication avec PyQt.

Tout se fait au final localement. J'ai ainsi un grapheur performant sans avoir à le fabriquer moi même ce qui me demanderait beaucoup de temps.