ページタイトルとURLを取得できる2種類のブックマークレット

現在のページタイトルとURLを取得できる2種類のブックマークレットの例です。

ブックマークレットをクリックするとダイアログが表示され、その中のテキストボックス内にページタイトルとURLが取得されます。

ページタイトルとURLをそれぞれ取得

以下のリンクをドラッグ・アンド・ドロップで、ブラウザのブックマークバーなどに追加して使用してください。

ページタイトル + URL

ブックマークレットの説明

1つ目のブックマークレットは、現在のページタイトルとURLを、それぞれ取得できるブックマークレットです。取得する際は、タイトルとURLの間に改行が入ります。

ソースコード

上記ブックマークレットではaタグのhref属性に以下を指定してあります。

javascript:prompt(
	'ページタイトル + URL',
    document.title + '\n' + location.href
)();

ページタイトルをaタグで囲んでURLリンクを取得

以下のリンクをドラッグ・アンド・ドロップで、ブラウザのブックマークバーなどに追加して使用してください。

ページタイトル +aタグ

ブックマークレットの説明

2つ目のブックマークレットは、現在のページタイトルをaタグで囲んで取得するブックマークレットです。aタグの属性には以下を指定してあります。

  • href属性でURLを指定
  • title属性でページタイトルを指定
  • target属性で_blankを指定
  • rel属性でnoopenerを指定

rel属性のnoopenerは、「target=_blank」 に対するフィッシング詐欺攻撃などを防止するためです。詳しくは以下のページを参考にしてみてください。

リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io

ソースコード

上記ブックマークレットではaタグのhref属性に以下を指定してあります。

javascript:(function(){
	var url = location.href;
	var title = document.title;
	var tag = '<a href="'+url+'" title="'+title+'" target="_blank" rel="noopener">'+title+'</a>';
	prompt( 'ページタイトル + リンク', tag );
})();

ソースコードの説明

上記、2種類のブックマークレットともに、JavaScriptのprompt()メソッドを使用しています。prompt()メソッドでは、ブラウザのダイアログにメッセージとテキストのボックスを表示できます。

第1引数にはダイアログに表示されるメッセージを指定でき、第2引数にはテキストボックス内に表示される文字列を指定できます。

編集後記 

今回のブログでは、ブックマークレットで、aタグのhref属性にJavaScriptを指定してあります。しかし、WordPressのビジュアルエディタでは、aタグのhref属性にJavaScriptを指定できないようです。テキストエディタで編集できるのですが、ビジュアルエディタに切り替えると削除されてしまいます。(´・ω・`)

参照サイト・書籍

 

コメントまたはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。Twitterで返信する場合はコチラから。