ロケーター＆ページに外部要素を追加する方法
ロケーターのローカルページへの基本的な HTML 挿入方法を説明します。
対象範囲
この記事では、JavaScript を使用してロケーター＆ページに外部コンポーネントを追加するための、汎用的で基本的な方法を紹介します。
はじめに
免責事項
以下の方法は、特定のバージョンのロケーター＆ページで作成・テストされたものです。この方法は将来的にサポートされなくなる可能性があり、サポートを保証するものではありませんのでご注意ください。概念実証（PoC）としてご利用ください。
ここで紹介する外部 HTML 要素をロケーター＆ページに挿入する方法では、JavaScript を使用して、ロケーター＆ページの特定の要素の後に要素を挿入します。
スクリプト
window.setInterval(function() {
if(document.getElementsByClassName('myAddedParagraph').length == 0 && document.getElementsByClassName('ubsf_details-box-wrapper ubsf_categories-box').length > 0){
const cats = document.getElementsByClassName('ubsf_details-box-wrapper ubsf_categories-box')[0];
var html = "<p class=\"myAddedParagraph ubsf_details-box-wrapper\">newly added paragraph</p>";
cats.insertAdjacentHTML("afterend", html);
}
}, 500);仕組み
この JavaScript は 500 ミリ秒ごとに実行され、次の 2 点を確認します：
1- クラス myAddedParagraph を持つ要素がこのページに存在するか？
2- クラス ubsf_details-box-wrapper ubsf_categories-box を持つ要素がこのページに存在するか？（新しい要素はカテゴリー要素の後に追加されるため、これが必要です）
確認 1 の答えが「いいえ」で、確認 2 の答えが「はい」の場合、新しい HTML 要素（cats）が定義され、次のクラスを持つ要素の後に追加されます：ubsf_details-box-wrapper ubsf_categories-box。
スクリプトを一定間隔で実行することで、ユーザーがロケーターの別のページに移動しても動作し続けます。
他の要素に適用する
スクリプトを別のユースケースに適用するには、いくつかの箇所を変更する必要があります。上記の例では、ローカルページのカテゴリー要素の下に新しい段落を追加しています。
- html 文字列には、新しい要素の HTML 構造を含める必要があります
- 新しい要素のクラス名は、スクリプト内で一貫させる必要があります（この例では myAddedParagraph）
- 新しい要素を追加する位置の基準となる要素のクラス名（この例では ubsf_details-box-wrapper ubsf_categories-box）
- 対象の要素の前に新しい要素を追加するには、afterend を変更します（https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)