Detect link and open new window

You must Login before you can answer or comment on any questions.

Plateform : Android +2.3 Titanium Studio, build: 2.1.1, Titanium Mobile, SDK 1,8

Hello,

Searching on the QA without success, i need help.

I want all link on a webview open on a new window, with Titanium.Platform.openURL of course.

I changed the webview with a css file to make it look more appropriately on mobile.

My code : 

wb = Ti.UI.createWebView({
                 pluginState:Titanium.UI.Android.WEBVIEW_PLUGINS_ON,
                top:42,
                html:'<html><head><meta name="viewport" content="width=device-width, user-scalable=no"><link rel="stylesheet" type="text/css" media="all" href="viewport.css"/><script src="link.js"></script></head><body><center><div id="title"> '+ row.title +'</div></b></center><br><div id="auteur">Publié le&nbsp'+row.pubDate+'&nbsppar&nbsp;'+ row.author +'&nbsp&nbsp</div><br>'+ row.url +'</br></body></html>',
                    scalesPageToFit:true,
                backgroundColor:'#ffffff',
                    modal:true
                    });
            w.add(wb);
 
            wb.addEventListener("load", function(e) {
            toolActInd.hide();
 
            var links = wb.links;
            var llength = links.length;
            for (var i = 0; i < llength; ++i) {
              if (links[i].addEventListener) {
                links[i].addEventListener('click', function(e) {
                Titanium.Platform.openURL(e.links);
                });
              }
            }
            });
What's is wrong in this code ? Thanks for helps.

5 Answers

Hi Suon

If you are trying to listen to link inside a web page, and then responded inside the app, do this.

Example web page; 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=320, initial-scale=1.0"/>  
    <meta name="format-detection" content="telephone=no">
    <title>Web Page</title>
    <link rel="stylesheet" href="styles.css" />
<script type="text/javascript">
    function agree(boolAgreement) {
        Ti.App.fireEvent('agreeterms', { agree: true });
        return false;
    }
</script>
</head>
<body>
<p><a style="text-decoration: underline; font-weight: bold" onclick="agree(true);">Yes I agree to these Terms of Service</a></p>
</body>
</html>
And then add this to your code when you want to respond to it; 
function agreeTerms(e) {
    Ti.App.removeEventListener('agreeterms', agreeTerms);
    winTerms.close();
    Ti.App.Properties.setBool('Terms.Agreed', e.agree);
    Ti.App.fireEvent('profile', {
        terms: 'Yes'
    });
}
Ti.App.addEventListener('agreeterms', agreeTerms);
This will let you respond to the link "Agree" and respond as required.

Hello Malcolm !

I'm sorry but i don't see your answer !

The problem is i'm parsing a RSS and i can't add HTML code.

I'm searching again but error, error, error :/

Hello Nicolas,

When you would like to dialog with a webview, you must use a JS gateway like the code of Malcom.

Load the webview -> user click on a link -> embed JS launch a fireEvent -> your app get your event and open the link !

Your code look like this: 

wb = Ti.UI.createWebView({
                 pluginState:Titanium.UI.Android.WEBVIEW_PLUGINS_ON,
                top:42,
                html:'<html>
              <head>
                <meta name="viewport" content="width=device-width, user-scalable=no">
                <link rel="stylesheet" type="text/css" media="all" href="viewport.css"/>
                            <!-- <script src="link.js"></script> -->
                <script type="text/javascript">
                      function clickLink(url) {
                        Ti.App.fireEvent('webviewLink', { url: url });
                    return false;
                              }
                            </script>
                          </head>
                          <body>
                             <center>
                               <div id="title"><a href="#" onclick="clickLink('+ row.url +');" '+ row.title +'</a></div>
                             </center><br />
                             <div id="auteur">Publié le&nbsp'+row.pubDate+'&nbsppar&nbsp;'+ row.author +'&nbsp&nbsp</div><br>'+ row.url +'<br />
                           </body>
                         </html>',
                    scalesPageToFit:true,
                backgroundColor:'#ffffff',
                    modal:true
                    });
            w.add(wb);
 
            wb.addEventListener("load", function(e) {
              toolActInd.hide();
            });
 
            wb.addEventListener("webviewLink", function(e) {
              // open URL in your window with "e.url"
            });

Hello Damien, Thank for you answer but i got an error in your code. I searching for the problem.

Thanks again !

@Suon Nicolas you will need to write JS code that parses the XML feed you recieve and modifiy the dom to allow for the links to be updated with the proper appcelerator event code

Your Answer

Think you can help? Login to answer this question!