Blocked Javascript in QWebView and WebView (QML)

Gram

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:

<html>
  <head>
  <title>ol3 pgRouting client</title>
  <meta charset="utf-8">
  <link href="ol3/ol.css" rel="stylesheet">
  <style>
  #map {
    width: 400px;
    height: 400px;
  }
  </style>
  </head>
  <body>
  <div id="map"></div>
<button id="clear">clear</button>
  <script src="http://openlayers.org/en/v3.0.0/build/ol.js"></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().getCenter();
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]
  })
});
map.addLayer(vectorLayer);

// 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: 'http://pgrouting.org/geoserver/pgrouting/wms',
        params: params
      })
    });
    map.addLayer(result);
  }
});



  </script>
  </body>
</html>

This is how I load HTML in QWebView:

#include "mainwindow.h"
#include "ui_mainwindow.h"


MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    m_pWebView = new QWebView(this);
    //set position and size
    m_pWebView->setGeometry(0,0,800,800);
    m_pWebView->load(QUrl("file:///Users/nenadbiresev/Documents/ol3/ol3.html"));

}

MainWindow::~MainWindow()
{
    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"
    }
}

Regards
Gram