[SOLVED] How to make the link in WebView to openUrlExternally when onClick?



  • I have this WebView, and the data is called from a XML.
    In the XML data, there is a link that I want to openUrlExternally when onClicked.
    This are my codes.

    @ WebView {
    id:web
    html: "<html><head><content="width=device-width"/><style>
    img{max-width:100%;} a:link{color: #56A5EC; text-decoration: none;}</style>
    </head><body style="background-color: black; color:white">"+itemNews+"</body></html>";
    transformOrigin: WebView.TopLeft
    preferredWidth:window.width - 10
    settings.defaultFontSize : (window.width/480)*25
    width:window.width - 10
    }@

    the a:link contained link that I would wanna openUrlExternally when onClicked

    Here is the XML data that I called into the WebView

    <div>More info at <a href="http://www.facebook.com" target="_blank">here</a></div> -------------> I wanna detect this link when onClicked through my WebView

    Can someone show me how to detect the link from my WebView?
    Your help is much appreciated. Thank you.



  • With a little hint from my friend on how to write javascript, I managed to solve it.
    When a link is clicked, there will be a pop up asking the user if they would want to view the webView externally. When OK is clicked, the link clicked will be opened externally in a web browser.

    Here are my codes for future reference.

    @ WebView {
    id:web
    html: "<html><head><content="width=device-width"/>
    [removed]
    function click()
    {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++)
    { links[i].onclick = hyperlink;}

                        var image = document.getElementsByTagName(\"img\");
                        for(j=0; j<image.length; ++j){
                        document.images[j].style.height = 'auto';
                        document.images[j].style.width = 'auto'; }
                        }
    
                       function hyperlink()
                        {var theURL = this.getAttribute('href');
                         var eventObject = new Object;
                         var a = 'URL';
                         eventObject[a] = theURL;
                         window.qml.qmlCall(theURL);
                        }
                    [removed]
                    &lt;style&gt;img{max-width:100%;} hr{max-width:100%;} iframe{max-width:100%; width:auto; height:0;} a:link {color:#FF0000; text-decoration: none; word-wrap:break-word;}&lt;/style&gt; &lt;/head&gt;&lt;body onload = \"click();\"style=\"background-color: black; color:white; word-wrap:break-word;\">"+itemNews+"&lt;/body&gt;&lt;/html>";
                    transformOrigin: WebView.TopLeft
                    preferredWidth:window.width - 10
                    settings.defaultFontSize : (window.width/480)*25
                    settings.pluginsEnabled: true
                    javaScriptWindowObjects:
    
                    QtObject {
                       id: object
                       property string link : qmlCall(theURL);
                       WebView.windowObjectName: "qml"
    
                       function qmlCall(theURL)
                        {
                           link = theURL;
                           console.log(theURL);
                           selectionDialog1.open();
                        }
                  }
               }
    

    }

          CommonDialog
            {
                id:selectionDialog1
                titleText: "Caution :"
    
                content: Column
                {
                spacing: 8
                anchors.left: parent.left
                anchors.right: parent.right
    
    
                Label
                {
                id: titleLabel1
                text: "You are now being redirected to Web Browser\n"
                wrapMode : Text.WordWrap
                color: platformStyle.colorNormalLight
                font.pointSize:10
                anchors {
                left: parent.left
                right: parent.right
                leftMargin: 10
                }
                }
    
                ButtonRow
                 {
                     anchors
                     { left: parent.left; right: parent.right
                     margins: 16
                     }
    
                     Button
                     {   text: "Ok"
                         onClicked: Qt.openUrlExternally(object.link) + console.log(object.link);
                     }
    
                     Button
                     {   text: "Cancel"
                         onClicked: selectionDialog1.reject() + console.log("cancel");
                     }
                 }
            }
      }@


  • the part [removed] is actually script and /script inside < >
    i have no idea why it changed to [removed] when i paste the codes.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.