🔖

今風のカンタンGoogle翻訳をドロップダウンで実装したら、初回選択時しか翻訳できないのを解決してみた

2022/09/30に公開

JavaScript

google翻訳

プルダウン

tech

以下のページのやり方で翻訳機能をプルダウンでつけてみたところ、一度翻訳するとさらに別の言語に翻訳したり、戻したりできないというところでハマりました・・・（記事の中にもしっかりと書かれています）。

こんな感じのページに飛びます。

翻訳できないページ
コンセント抜いちゃったのね・・・

これは、翻訳後のページからのリンク先を翻訳したページに飛ばす機能が働いているからで、二重にパラメータが付いてしまうので、起こる現象ということです。
iframeで別のページから読み込んだらダメかなーと思ったんですが、iframeの中身まで翻訳してくれますね、なんと優秀・・・（悔

じゃあページ読み込み後にjsでDOMを書き換えちゃえばよくね？

ということで書いたjsがこちらになります。

今回は日・英・スペインの3か国語だったので、適宜必要な言語に変えてください。

htmlには、初回用の翻訳ページのリンク先を入れて置き、あとでリンク先を入れ替えられるようにidを設定しておきます。

<select name="lang_select" onChange="location.href=value;">
	<option>翻訳</option>
	<option id="lang_ja" value="http://example.com/">日本語</option>
	<option id="lang_en" value="https://translate.google.com/translate?sl=ja&tl=en&u=http://example.com/">English</option>
	<option id="lang_es" value="https://translate.google.com/translate?sl=ja&tl=es&u=http://example.com/">Spanish</option>
</select>

//ドメインを設定（本番環境に合わせて書き換え）
const domain = 'http://example.com';
//現在のURLを取得
const url = location.href;

//ページの読み込み終了時に実行
document.addEventListener("DOMContentLoaded", function(event) {
	//翻訳ページが表示されている場合
	if(url.match(/_x_tr_sch/)){

		//ドメイン以降のパスを取得（パラメータ含まず）
		const path = location.pathname;

		//リンク先が入っている要素を取得
		const elm_ja = document.getElementById('lang_ja');
		const elm_en = document.getElementById('lang_en');
		const elm_es = document.getElementById('lang_es');

		//日本語・英語・スペイン語それぞれの翻訳先URLをセット（ドメインまで）
		let ja_url = domain;
		let en_url = 'https://translate.google.com/translate?sl=ja&tl=en&u='+domain;
		let es_url = 'https://translate.google.com/translate?sl=ja&tl=es&u='+domain;
		
		//各URLに現在のパスを足してURLを完成させる
		ja_url = ja_url + path;
		en_url = en_url + path;
		es_url = es_url + path;
		
		//optionタグのvalueを書き換え
		elm_ja.setAttribute('value', ja_url);
		elm_en.setAttribute('value', en_url);
		elm_es.setAttribute('value', es_url);
	}
});

じゃあページ読み込み後にjsでDOMを書き換えちゃえばよくね？

Discussion