iPhone Safari で特定の条件時にクリップボードコピーができない

実現したいこと

iPhone Safari でクリップボードコピーがしたい。

前提

後述のHTMLと同一フォルダに適当なtest.jsonを置いて実行した所、
Windows10のChromeやFirefoxでは問題無く動作するのですが、
iPhone Safariで実行するとbeforeクラスのボタンは問題無いのですが、
afterクラスのボタンをクリックするとエラーが発生します。

発生している問題・エラーメッセージ

クリックイベントの処理でfetchで取得した情報をクリップボードにコピーしたいのですが、fetchを実行した後にnavigator.clipboard.writeTextを実行するとエラーになります。
対処の仕方が分からず困っています。

error
1The request is not allowed by the user agent or the platform in the current content, possibly because the user denied permission.

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
5<meta name="viewport" content="width=device-width,initial-scale=1.0">
6<title>テスト</title>
7<style>
8body {
9	text-align: center;
10}
11</style>
12</head>
13<body>
14
15<br><br>＝＝
16<button class="before" type="button">ボタン</button>＝＝
17<button class="before" type="button">ABC</button>＝＝
18<button class="before" type="button">XYZ</button>＝＝
19<br><br>＝＝
20<button class="after" type="button">ボタン</button>＝＝
21<button class="after" type="button">ABC</button>＝＝
22<button class="after" type="button">XYZ</button>＝＝
23<br><br>
24<form>
25<textarea id="box" rows="8" style="width: 90%"></textarea><br>
26<input type="reset" value="クリア">
27</form>
28<br>
29
30<script>
31((d, w) => {
32	let box = d.getElementById('box');
33	d.addEventListener('click', async (e) => {
34		try {
35			if (! e.target.matches('.before, .after')) return;
36			e.preventDefault();
37			box.value += 'クリック: ' + e.target.textContent + '\n';
38			let text = `${e.target.className} ${e.target.textContent} ${Date.now()}` + '\n';
39			if (e.target.matches('.before')) {
40				await navigator.clipboard.writeText(text);
41				return;
42			}
43			let response = await fetch('test.json');
44			if (! response.ok) throw new Error('fetch error');
45			let oe = await response.json();
46			await navigator.clipboard.writeText(text);
47		} catch (err) {
48			alert(err.message);
49		}
50	}, false);
51})(document, window);
52</script>
53</body>
54</html>

試したこと

補足情報（FW/ツールのバージョンなど）

特別なものは使用していません。

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

回答1件

ベストアンサー

この回答はGPT-4による自動生成回答です

iPhone Safariでは、navigator.clipboard.writeTextを使用する際に、ユーザーの直接的なアクション（例：ボタンクリック）が必要です。fetchを使用しているため、非同期処理が発生し、ユーザーアクションとの関連性が失われてしまっています。

この問題を解決するために、navigator.clipboard.writeTextをsetTimeoutでラップして、非同期処理を同期的に実行することができます。

該当のソースコードの修正箇所：

javascript
1// ...
2let response = await fetch('test.json');
3if (!response.ok) throw new Error('fetch error');
4let oe = await response.json();
5
6// Wrap navigator.clipboard.writeText in setTimeout
7await new Promise((resolve, reject) => {
8  setTimeout(() => {
9    navigator.clipboard.writeText(text).then(resolve).catch(reject);
10  }, 0);
11});
12// ...