[Titanium Mobile] WebView内のLinkをClickしたときにSafariで開く

投稿日：

titanium_webview_safariWebView内のリンクをクリックしたときに遷移せず、イベントだけアプリに通知して、ブラウザを起動する方法。

環境： Titanium SDK 2.1.4

下記のようにHTML内にイベント通知用のJavaScriptを埋め込む。

//
// HTMLを生成
//
var html = [];
html.push('<!DOCTYPE html>');
html.push('<html>');
html.push('<head>');
// window.onload用のJavaScriptを追加
html.push(getOnloadJavaScript());
html.push('</head>');

// Add body content
html.push('<body>');
html.push(content);
html.push('</body>');
html.push('</html>');

webview = Titanium.UI.createWebView({
    html: html.join('')
});

//
// window.onloadで実行するJavaScriptを文字列で返す
//
var getOnloadJavaScript = function() {
    // 全てのaタグのonclickイベントにフックする
    var linkClick = function() {
        var links = document.getElementsByTagName('a');
        for (var i=0; i<links.length; i++) {
            links[i].onclick = function(e) {
                var params = {};
                var elem = e.srcElement;
                if (elem) {
                    params.href = elem.getAttribute('href') || '';
                    params.className = elem.getAttribute('class') || '';
                    params.id = elem.getAttribute('id') || '';
                    params.title = elem.getAttribute('title') || '';
                }
                // Fire application event.
                Titanium.App.fireEvent("app_webview_open_link", params);
                return false;
            };
        }
    };

    var script = [];
    script.push('<script>');
    script.push('window.onload = ' + linkClick.toString());
    script.push('</script>');
    return script.join('');
};

 

あとはアプリ側でEventを受け取る処理を記述。

Titanium.App.addEventListener('app_webview_open_link', function(e) {
    console.log(e);
    if (e.href) {
        // Open browser
        Titanium.Platform.openURL(e.href);
    }
});

 

 

< Related Posts >