[Monaca] aタグを動的にInAppBrowserプラグインで開くようにしてみる

以前、<a>からInAppBrowserプラグインを利用するでも書きましたが、Monacaで開発したアプリでaタグを利用した場合、遷移先にアプリに戻るためのリンクが用意されていない場合は、アプリに戻ることができません。

そこで、aタグをInAppBrowserプラグインを利用して開くことになるのですが、はじめから下記のように、

<a href="#" onclick="openMonaca();">Monaca</a>

<script>
  function openMonaca() {
    window.open("https://ja.monaca.io/", '_blank', 'location=yes');
    return false;
  }
</script>

記述することができれば良いのですが、aタグのリンク先を動的にInAppBrowserプラグインで開きたい場合もあります。

下記のように記述することで、動的にaタグをInAppBrowserプラグインで開くことができます。

var arrATag = document.getElementsByTagName('a');
if (arrATag.length > 0) {
  replaceATag(arrATag);
}

/**
 * aタグを置換します。
 * 
 * @param {String[]} arrATag
 */
function replaceATag(arrATag){
  for(var i = 0; i < arrATag.length; i++) {
    (function(a) {
      var href = a.href;
      a.href = '#';
      a.onclick = function(){
        var ref = window.open(href, '_blank', 'location=yes');
        return false;
      }
    })(arrATag[i]);
  }
}

HTMLファイル読み込み時にaタグを動的に変更する場合は、下記のように記述することで可能です。

document.addEventListener('DOMContentLoaded', function(event) {
  var arrATag = document.getElementsByTagName('a');
  if (arrATag.length > 0) {
    replaceATag(arrATag);
  }
}, false);

function replaceATag(arrATag){
  for(var i = 0; i < arrATag.length; i++) {
    (function(a) {
      var href = a.href;
      a.href = '#';
      a.onclick = function(){
        var ref = window.open(href, '_blank', 'location=yes');
        return false;
      }
    })(arrATag[i]);
  }
}

aタグを動的にInAppBrowserで開くようにする必要がある場合は、一度おためしください。