Posted at

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

More than 1 year has passed since last update.

以前、<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で開くようにする必要がある場合は、一度おためしください。