[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] <style>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;}</style> </head><body onload = \"click();\"style=\"background-color: black; color:white; word-wrap:break-word;\">"+itemNews+"</body></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"); } } } }@