遷移先のサイトで翻訳を継続したい

実現したいこと

遷移先のページを翻訳すること。
また一部サイトについて、遷移先のページから更に遷移した際にも翻訳した状態を継続できた。
日本経済新聞・朝日新聞→OK
Yahoo・Locond→遷移時OKだがそこから更に遷移すると翻訳が戻ってしまう。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>外部リンク翻訳サンプル</title>
7    
8    <script>
9        document.addEventListener('DOMContentLoaded', function() {
10            const links = document.querySelectorAll('a');
11            
12            links.forEach(link => {
13                link.addEventListener('click', function(e) {
14                    if (!link.href.startsWith(window.location.origin)) {
15                        e.preventDefault();
16                        const translateUrl = `https://translate.google.com/translate?sl=auto&tl=en&u=${encodeURIComponent(link.href)}`;
17                        window.location.href = translateUrl;
18                    }
19                });
20            });
21        });
22    </script>
23</head>
24<body>
25    <h1>外部リンクサンプル</h1>
26    
27    <p>以下のリンクをクリックすると、英語に翻訳された状態で表示されます：</p>
28    
29    <ul>
30        <li><a href="https://www.locondo.jp/">Locond</a></li>
31        <li><a href="https://www.yahoo.co.jp/">Yahoo! Japan</a></li>
32        <li><a href="https://www.nikkei.com/">日本経済新聞</a></li>
33        <li><a href="https://www.asahi.com/">朝日新聞</a></li>
34    </ul>
35    
36    <p>内部リンクのサンプル（翻訳されません）：</p>
37    <ul>
38        <li><a href="/about">会社概要</a></li>
39        <li><a href="/contact">お問い合わせ</a></li>
40    </ul>
41</body>
42</html>
43
44

発生している問題・分からないこと

Yahoo・LocondについてはJavascriptを多用しているかSPA対応をしているためか、最初に遷移した時点では翻訳した状態で表示できるが、そこから更に遷移すると翻訳状態が継続できない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>外部リンク翻訳サンプル</title>
7    
8    <script>
9        document.addEventListener('DOMContentLoaded', function() {
10            const links = document.querySelectorAll('a');
11            
12            links.forEach(link => {
13                link.addEventListener('click', function(e) {
14                    if (!link.href.startsWith(window.location.origin)) {
15                        e.preventDefault();
16                        const translateUrl = `https://translate.google.com/translate?sl=auto&tl=en&u=${encodeURIComponent(link.href)}`;
17                        window.location.href = translateUrl;
18                    }
19                });
20            });
21        });
22    </script>
23</head>
24<body>
25    <h1>外部リンクサンプル</h1>
26    
27    <p>以下のリンクをクリックすると、英語に翻訳された状態で表示されます：</p>
28    
29    <ul>
30        <li><a href="https://www.locondo.jp/">Locond</a></li>
31        <li><a href="https://www.yahoo.co.jp/">Yahoo! Japan</a></li>
32        <li><a href="https://www.nikkei.com/">日本経済新聞</a></li>
33        <li><a href="https://www.asahi.com/">朝日新聞</a></li>
34    </ul>
35    
36    <p>内部リンクのサンプル（翻訳されません）：</p>
37    <ul>
38        <li><a href="/about">会社概要</a></li>
39        <li><a href="/contact">お問い合わせ</a></li>
40    </ul>
41</body>
42</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

補足

特になし

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

回答1件

google翻訳はフィッシングのリスクがあるのであまりこれをベースにサービスを展開するのは危険です。またリンク先（サービス提供側）が不正を検知するなど正しいサイトに誘導したりされれば想定とは違う動作になるのは仕方ありません。iframeで呼べばCORSにかかるサイトはコンテンツの再利用を許可していないと考えるのが妥当です

投稿2024/11/20 00:44