Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Qt 5.5 - WebView not showing generated HTML site.



  • Hi friends,
    i try to display the following HTML code in a WebView:

    WebView {
        id: webview
        x:0;
        y:0;
        width: 1600;
       height: 1200;
     }
    

    then when i call for example:
    URL = "<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(35.350498199500002,-116.888000488); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.SATELLITE, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN }, scaleControl: true }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var distanceWidget = new DistanceWidget(map); } function DistanceWidget(map) { this.set('map', map); this.set('position', map.getCenter()); var marker = new google.maps.Marker({ draggable: true, title: 'Move me!' }); google.maps.event.addListener(marker, 'drag', function(event){ document.getElementById("markerLat").value = event.latLng.lat(); document.getElementById("markerLon").value = event.latLng.lng();}); marker.bindTo('map', this); marker.bindTo('position', this); } DistanceWidget.prototype = new google.maps.MVCObject(); </script> </head> <body onload="initialize()"> <input id="markerLat" type="hidden"> <input id="markerLon" type="hidden"> <div id="map_canvas" style="width: 100%; height: 100%"></div> </body> </html>"

    and then assign the data to the webview:

    webview.url = URL

    i get error that the page can not be displayed. Same content in external browser looks good.

    The output of
    console.debug(webview.url)
    looks like this:

    qrc:/resources/qml/%3Chtml%3E %3Chead%3E %3Cscript type=%22text/javascript%22 src=%22http:/www.google.com/jsapi?autoload=%7B'modules':[%7Bname:'maps',version:3,other_params:'sensor=false'%7D]%7D%22%3E%3C/script%3E %3Cscript type=%22text/javascript%22%3E function initialize() %7B var latlng = new google.maps.LatLng(35.350498199500002,-116.888000488); var myOptions = %7B zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.SATELLITE, mapTypeControlOptions: %7B style: google.maps.MapTypeControlStyle.DROPDOWN_MENU %7D, navigationControlOptions: %7B style: google.maps.NavigationControlStyle.ZOOM_PAN %7D, scaleControl: true %7D; var map = new google.maps.Map(document.getElementById(%22map_canvas%22), myOptions); var distanceWidget = new DistanceWidget(map); %7D function DistanceWidget(map) %7B this.set('map', map); this.set('position', map.getCenter()); var marker = new google.maps.Marker(%7B draggable: true, title: 'Move me!' %7D); google.maps.event.addListener(marker, 'drag', function(event)%7B document.getElementById(%22markerLat%22).value = event.latLng.lat(); document.getElementById(%22markerLon%22).value = event.latLng.lng();%7D); marker.bindTo('map', this); marker.bindTo('position', this); %7D DistanceWidget.prototype = new google.maps.MVCObject(); %3C/script%3E %3C/head%3E %3Cbody onload=%22initialize()%22%3E %3Cinput id=%22markerLat%22 type=%22hidden%22%3E %3Cinput id=%22markerLon%22 type=%22hidden%22%3E %3Cdiv id=%22map_canvas%22 style=%22width: 100%25; height: 100%25%22%3E%3C/div%3E %3C/body%3E %3C/html%3E

    If i call
    webview.url = "http://www.google.com"
    for example it works fine.

    Any ideas whats wrong here?

    Greetings
    Nando


Log in to reply