「MailtoUI」というJavaScriptライブラリの表記を変更したい

タイトルが分かりづらく申し訳ございません。
https://mailtoui.com/

上記のJavaScriptライブラリを使って、mail:toリンクをクリックした時にモーダルウィンドウで
gmailやoutlookなどを選択できるようにしています。

実装的にはできているのですが、英語表記を変えることができずに困っております。
実際に出てくる画像を添付いたします。

例えば「Gmail in browser」という表記を「Gmailをブラウザーで開く」のような日本語表記に変えたいと思います。

対処したこと
①以下のように通常のcdnに加えてdata-optionsを指定しそれぞれの値に表示したい文言を入れております

<script src="https://cdn.jsdelivr.net/npm/mailtoui@1.0.3/dist/mailtoui-min.js"  data-options='{ "title":"メールを開く方法を選んでください", "buttonText1": "Gmailをブラウザーで開く", "buttonText2": "Outlookをブラウザーで開く", "buttonText3": "Yahooをブラウザーで開く", "buttonText4": "デフォルトのメーラーで開く" , "buttonTextCopy": "コピー" }'></script>
コード

②、①ができなかったのでJavaScriptを使ってidを取ってきてinnerHTMLを使って変更するも反応なし

const gmailText = document.getElementById("mailtoui-button-text-1");
gmailText.innerHTML = "Gmailをブラウザーで開く";
コード

行動規範の内容に同意します

回答1件

ベストアンサー

The easiest way to load MailtoUI is to pull it into your page via CDN. Add it to the bottom of your page, just before the closing </body> tag.

https://mailtoui.com/#Installation

上記の様に書いてあるとはいえ、htmlファイル内の最後のscriptタグでなければ動作しないというのは作者の方には失礼ですが少し作りが甘く見えます。

解決策

1.HTMLファイル内の最後の`script`タグになるようにソースを調整する

js
1<html>
2    <body>
3        <!---->
4        <script ~><!--他のスクリプト-->
5        <script ~><!--MailtoUIのスクリプト-->
6    </body>
7<html>

MailtoUIを修正する

以下の部分が問題です。

var t = document.getElementsByTagName("script");
return t[t.length - 1].getAttribute("data-options");

CDN版ではなくローカルにダウンロードしてJSとHTMLを以下のように修正すればscriptタグの位置は関係なくなるかと思います。

js
1var v = document.querySelector("#mailtoscript");
2return v ? v.getAttribute("data-options") : null;

html
1<script
2      id="mailtoscript"
3      defer
4      src="./mailtoui-min_new.js"
5></script>

投稿2021/10/14 11:18

k_a

総合スコア983

k_a

2021/10/14 11:23

ちなみに「②、①ができなかったのでJavaScriptを使ってidを取ってきてinnerHTMLを使って変更するも反応なし」が反応しなかったのは、mailtouiのコードに上書きされているのだと思います。 mailtouiのscriptより後、かつ`window.onload`内に記述すれば影響するようになるのではないでしょうか？