URLクリック時のアクション

Question

前提・実現したいこと

Monacaという開発環境でハイブリットアプリケーションの作成をしているのですが、元々あるaタグのurlを取得（クリックした際）し、それをInappBrowserで開きたいと思っています。
aタグに関しては別のサーバーからのhtml情報を取得しそのまま反映させているので手を加えることができない状態です。(下記のソースのようにng-bind-html="htmltext"で引っ張ってきており、htmltextで表示した中にaタグが入っています)
Javascript等を使用してページ内のURLをクリックしたときだけそのURL遷移先をInappBrowserで表示することはできないでしょうか。

該当のソースコード

<ons-page id="list_inside.html">
    <div class="wrap">
    　<div ng-bind-html="htmltext" class="list">
　　　　//以下がbindで表示された中身
　　　　<p></p>
       <p>中身</p>
       ・
　　　　・
　　　　<a>中身</a>
       <p></p>
       ・
　　　　・
　　　　・
       //ここまで
　　　</div>
    </div>
</ons-page>

試したこと

document.getElementsByTagName('a').getAttribute('href');
等試しましたが取れませんでした。

シングルページアプリケーションなので、イベント処理をどのように行うのが良いのかもわかっていません。

Comments

[m.ts10806]

調べてみたこと、やってみたこと（そのソースコード）を具体的に追記してください。また参考先サイトがあればURLも質問に追記してください。既に見た先が回答についてしまうと無駄なやり取りが発生しますし、もしかしたら参考記事の理解が間違っているために解決に至れていないのかもしれません。https://teratail.com/help/question-tips#questionTips1-2

[m.ts10806]

質問テンプレート部分の文言が多く残っています。質問内容や意図を読み取る上ではノイズにしかなりませんので、自身の質問に関係のある文章（およびソースコード）のみ残してください。

[k_fuku]

大変申し訳ございません。書き換えさせて頂きました。ありがとうございます。

[m.ts10806]

提示コードからは読み取れなかったのですが、実際にブラウザで表示した際にaタグは存在しているのでしょうか？

[k_fuku]

はい。アプリで確認していますが、遷移もできていますし、ログでもaタグが出ているのを確認できています。

Answer 1

※Monaca使ったことなくInappBrowserについてもドキュメント読んだ程度なので直接の解決策ではなくアドバイス程度の回答です

要はhrefを取得できれば良さそうという認識での回答です。

getElementsByTagName()が返すのはHTMLCollectionなので取得後、例えばforなどでループして1つ1つのエレメントに対して取得するような書き方をしなければなりません。

<a href="a.html">a</a>
<a href="b.html">b</a>
<a href="c.html">c</a>

let atags = document.getElementsByTagName("a");
for(i=0;i<atags.length;i++){
    console.log(atags[i].getAttribute("href"));
}
//a.html
//b.html
//c.html

ただ、preventDefaultでキャンセルしておかないといけないかもしれません。

対象のリンク先が限定されているのであれば、InappBrowserのopenを直接対象のaタグにonclickに入れたほうがいいかもしれません。

Comments

[k_fuku]

ありがとうございます。
上記でいけそうなんですけれども、ng-bind-htmlにAタグがあることはコンソール等でも確認したにも関わらず、 var value = atags.length ;　console.log( value ) ;を行うと、0と出てしまいます。
もしかしたら、取得できないのかもしれません。。。

[m.ts10806]

ブラウザに表示されたhtmlソースを質問に追記いただいて良いですか？

[k_fuku]

ソースを追記しました。
実際に表示されたものをウェブで見てみるとほとんど<p>タグだらけで一つだけ<a>タグがある形でした。