JavaScript

URLとタイトルをクリップボードにコピーする【JavaScript】

この記事では、URLとタイトルをクリップボードにコピーする方法を説明していきます。

execCommandは廃止されている機能で利用が非推奨であるため、他の方法で実現します。

navigator.clipboardを使います。

URLをクリックボードにコピーする

まずはシンプルに現在のページのURLをコピーしてみます。

以下のページで紹介した、locationを使います。

≫現在のページのURL情報を取得・整形するlocation

デモは以下になります。

何も動作しないですが、現在のページのURLがクリップボードにコピーされています。メモ帳などに貼り付けてみてください。

実際のコードは以下になります。

<input type="button" value="コピー" onclick="copyUrl()">
function copyUrl() {
  var url = location.href;
  navigator.clipboard.writeText(url);
}

とてもシンプルですね。

ページタイトルとURLをクリップボードにコピーする

それでは、現在のページのタイトルとURLをクリップボードにコピーしてみましょう。

デモは以下になります。

タイトル+空白+URLの文字列がクリップボードにコピーされるはずです。

実際のコードは以下になります。

<input type="button" value="コピー" onclick="copyUrlTitle()">
function copyUrlTitle() {
  var url = location.href;
  var title = document.title;
  navigator.clipboard.writeText(title + " " + url);
}

document.titleで、meta titleを取得しています。

この部分は好みに応じて変更いただければ大丈夫です。

(例えばh1タグにidをつけて、document.getElementById()でテキストを取得するなど)


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5