Congratulations to our 2022 Qt Champions!

Blocked Javascript in QWebView and WebView (QML)

  • Hello,
    I have tried to render HTML-Code with Javascript in QML. It should show a map from Openstreetmap(local file).
    The problem I am facing now is that in Qt (QWebView) the map isn't shown but the clear button is shown. In QML the map is shown but when I click the clear button nothing happens. the clear button should clear start and destination point from the map, which added via mouse click. Does someone know if there are any blocked functionalities from Javascript in Qt and QML ? I tried same example in Google Chrome and Safari and it works fine. I am using Qt-5.4.0 on OS X 10.9.5 (64 Bit).

    The following HTML-Code is not working correctly in WebView and QWebView:

      <title>ol3 pgRouting client</title>
      <meta charset="utf-8">
      <link href="ol3/ol.css" rel="stylesheet">
      #map {
        width: 400px;
        height: 400px;
      <div id="map"></div>
    <button id="clear">clear</button>
      <script src=""></script>
      <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
        view: new ol.View({
          center: [-13657275.569447909, 5699392.057118396],
          zoom: 10
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
    map.getView().setCenter([-29686, 6700403]);
    var params = {
      LAYERS: 'pgrouting:pgrouting',
      FORMAT: 'image/png'
    // The "start" and "destination" features.
    var startPoint = new ol.Feature();
    var destPoint = new ol.Feature();
    // The vector layer used to display the "start" and "destination" features.
    var vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [startPoint, destPoint]
    // A transform function to convert coordinates from EPSG:3857
    // to EPSG:4326.
    var transform = ol.proj.getTransform('EPSG:3857', 'EPSG:4326');
    // Register a map click listener.
    map.on('click', function(event) {
      if (startPoint.getGeometry() == null) {
        // First click.
        startPoint.setGeometry(new ol.geom.Point(event.coordinate));
      } else if (destPoint.getGeometry() == null) {
        // Second click.
        destPoint.setGeometry(new ol.geom.Point(event.coordinate));
        // Transform the coordinates from the map projection (EPSG:3857)
        // to the server projection (EPSG:4326).
        var startCoord = transform(startPoint.getGeometry().getCoordinates());
        var destCoord = transform(destPoint.getGeometry().getCoordinates());
        var viewparams = [
          'x1:' + startCoord[0], 'y1:' + startCoord[1],
          'x2:' + destCoord[0], 'y2:' + destCoord[1]
        params.viewparams = viewparams.join(';');
        result = new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: '',
            params: params

    This is how I load HTML in QWebView:

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    MainWindow::MainWindow(QWidget *parent) :
        ui(new Ui::MainWindow)
        m_pWebView = new QWebView(this);
        //set position and size
        delete ui;

    This is how I load HTML in QML:

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    import QtWebKit 3.0
    ApplicationWindow {
        title: qsTr("Hello World")
        width: 800
        height: 800
        visible: true
        WebView {
            id: webView
            anchors.fill: parent
            url: "file:///Users/nenadbiresev/Documents/ol3/ol3.html"


Log in to reply