ページタイトルとURLを取得できるブックマークレットの例|JavaScript・promptメソッド

今回は、ページタイトルとURLを取得するブックマークレットとして利用できる、JavaScriptの例となります。

ブックマークレットの挙動

今回は、2種類のブックマークレットの例となり、クリックするとダイアログが表示され、その中にあるテキストボックス内に、それぞれ以下のデータを取得します。

  • 現在のページタイトルとURLを取得
  • 現在のページタイトルをaタグで囲んだURLリンクを取得

以下、それぞれのブックマークレットのJavaScriptの例となります。

ページタイトルとURLを取得するブックマークレット

以下、現在のページタイトルとURLを取得するJavaScriptとなり、ブックマークのURL内に記述しブックマークレットとして利用します。

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

上記ブックマークレットでは、ダイアログ内のテキストボックスに、現在のページタイトルとURLを取得します。また、取得するページタイトルとURLの間には改行が入ります。

ページタイトルをaタグで囲んだURLリンクを取得するブックマークレット

以下、現在のページタイトルをaタグで囲んだURLリンクを取得するJavaScriptとなり、ブックマークのURL内に記述しブックマークレットとして利用します。

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 );
})();

上記ブックマークレットでは、ダイアログ内のテキストボックスに、現在のページタイトルをaタグで囲んだURLリンクを取得します。

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

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

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

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

JavaScriptのpromptメソッドについて

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

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

参考サイトなど

 

コメント投稿またはTwitterで返信

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

また、コメントは承認制となります。