I’ve run into a peculiar Qt WebKit JavaScript problem that has taken me awhile to find a simple reproducible example because it occurs intermittently. Because Qt’s implementation of WebKit doesn’t allow direct access to the nodes of an element I’ve been forced to use JavaScript to manipulate the HTML5 DOM. This has resulted in a problem that only occurs in the Qt WebKit implementation (it works in IE, Firefox, Chrome and Sarfari). The code that consistently reproduces the problem is as follows:
main.cpp
#include <QtGui/QApplication>
#include "mainwindow.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();
return a.exec();
}
mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private:
Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
mainwindow.cpp (… indicates the path to augh.html)
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QUrl>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
QUrl url("...augh.html");
ui->webView->load(url);
}
MainWindow::~MainWindow()
{
delete ui;
}
augh.html
<!DOCTYPE html5>
<html>
<head>
<title>fragment test</title>
[removed]
var ca;
window.onload=function(){
var range = document.createRange();
var mybody = document.body;
var children=mybody.childNodes;
var startOffset;
for(var i=0;i<children.length;i++){
if(children[i].nodeType===1){
startOffset=i;
break;
}
}
range.setStart(mybody,startOffset);
range.setEnd(mybody,startOffset+1);
$ca = range.commonAncestorContainer;
alert("direct:\n"+mybody[removed]);
alert("common ancestor innerHTML:"+$ca[removed]);
alert("ancestor nodeName:"+$ca.nodeName);
alert("common ancestor type = "+$ca.nodeType);
}
[removed]
</head>
<body>
pict.png
</body>
</html>
(note the script tags are removed and image tag <img id="myid" src="pict.png" /> has been replaced by pict.png in the above html)
The problem is that innerHTML sometimes replaces the the control characters (for example <>”) with their entity representations as can be seen from the alert output in the above example. Elsewhere I’ve enclosed the img tag with a div in order to prevent this but it still occurs intermittently. As noted earlier the above code works as expected on Chrome, Safari, FF, and IE.
My problem with this situation is two fold:
Is there something I don’t understand about how to use JavaScript? That is,is there some procedure I can use that will insure consistent results.
Is it just a problem with innerHTML or do the results reflect a real problem in the JavaScript Dom node manipulation.
Any help will be appreciated.
↧