2022年1月7日

javascriptでクリップボードへのコピーでエラーになる時の対処法

リンクをクリックした時に現在の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を確認してみましょう。

動作サンプル

URLをコピー

以上、javascriptでクリップボードへのコピーでエラーになる時の対処法でした。

コメントを残す

メールアドレスが公開されることはありません。