ping属性 - リンクをクリックした時のpingの送信先

2017/09/15

a要素のping属性は、指定するとリンクをクリックした時に、値に指定したURLにping(POSTメソッドのリクエスト)が送信されるようになります。a要素がhref属性を持っていないと、この属性は機能しません。

概要

要素: a要素
DOM Interface: HTMLAnchorElement.ping
仕様書: https://html.spec.whatwg.org/multipage/links.html#ping

値

pingが送信されるURLを表す文字列。

<a href="https://syncer.jp/" ping="/ping.php">SYNCER</a>

説明

ping属性の基本的な値の指定方法を紹介します。ping属性には、pingのリクエストを受けたいURLを指定して下さい。

リクエスト内容

リンクをクリックすると、ping属性に指定したURLにPOSTメソッドのリクエストが送信されます。このリクエストにはping-from、ping-toというヘッダーと、PINGというボディが含まれています。

Request Header

ping-from: https://example.com/from.html
ping-to: https://example.com/to.html

ping-from: リンクをクリックする前のロケーション。
ping-to: a要素のhref属性の値。リンクをクリックした後のロケーション。

Request Payload

PING

実装例

例えば下記の場合、リンクのクリック時、ping.phpにリクエストが送信されます。クリック回数の集計などに利用できるでしょう。

HTML

<a href="https://syncer.jp/" ping="./ping.php">SYNCER</a>

PHP (ping.php)

<?php
	// Request Payload
	$body = file_get_contents ( "php://input" ) ;

	// Request Header
	$from = isset( $_SERVER["HTTP_PING_FROM"] ) ? $_SERVER["HTTP_PING_FROM"] : null ;
	$to = isset( $_SERVER["HTTP_PING_TO"] ) ? $_SERVER["HTTP_PING_TO"] : null ;

デモ

下記にデモを用意しました。リンクをクリックするとpingが送信され、最新のpingの内容を確認できます。クリック前と後に内容が更新されているか確認してみて下さいね。

<!-- このコードは編集できます。 -->

<p>下記をクリックすると、pingが送信されます。</p>
<p>
	<a href="https://example.com/" ping="/ping.php" target="_blank">リンク</a>
</p>

<p>最新のpingの内容は下記で確認できます。</p>
<p>
	<a href="/ping.php" target="_blank">pingを確認する</a>
</p>