リンクをクリックした時に現在のURLをクリップボードにコピーしたい。シェアの方法として「リンクをコピー」といったボタンを置いたような場合に使用するケースで、javascriptであれば「navigator.clipboard.writeText()」で簡単に実装出来ます。
と思ったのですが、実装してクリックしてみると、こんなエラーが発生しました。
Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')
今回はこの「navigator.clipboard.writeText()」でぶつかったエラーの対処法を書いていきます。
HTMLとjavascriptの記述
まず、エラーとなった記述を書いてみます。
HTML
URLをコピー
javascript
$('a.url_copy').on('click', function(e) { e.preventDefault(); var url = location.href; navigator.clipboard.writeText(url); alert('URLをコピーしました'); });
aタグなので「e.preventDefault()」でリンクの挙動を止め、「location.href」でURLを取得し、「navigator.clipboard.writeText(url)」でクリップボードにコピーし、「alert」でアラートを表示する、というシンプルな内容。ですが、リンクをクリックするとエラーとなってしまいました。
原因は「http://」であること
確認はxamppで用意したローカル環境で行っていたのですが、URLが「http://~~~~~~/」というように、「http://」から始まるようになっていて、これが原因でエラーとなっていました。実際、サーバー上にアップして「https://」から始まるURLで試してみると、問題無く動作しました。
「Uncaught TypeError: Cannot read properties of undefined (reading ‘writeText’)」のエラーに困った時は、URLを確認してみましょう。
動作サンプル
以上、javascriptでクリップボードへのコピーでエラーになる時の対処法でした。