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

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

ブックマークレットの挙動
参考サイトなど

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

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

現在のページタイトルと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」に対するフィッシング詐欺攻撃などの防止するため指定しています。詳しくは文末の参考サイトを確認してみてください。

JavaScriptのpromptメソッドについて

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

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