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

honeyhong

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.

honeyhong

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");
                 }
             }
        }
  }@

honeyhong

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