Lightbox Info Board : SQLの窓

ロード時に実行される document.write で出力される文字列は、
最初から HTML として記述していたものとして扱われます。


<SCRIPT language="javascript" type="text/javascript">

	document.write( "<SPAN style='color:red'>123</SPAN>" );

</SCRIPT>

↑↓同じ結果となります


<SPAN style='color:red'>123</SPAN>

src 属性で外部ファイルとする


<SCRIPT language="javascript" type="text/javascript" src="inner.js"></SCRIPT>

inner.js


document.write( "<SPAN style='color:red'>123</SPAN>" );

外部ファイルは、type が一致していれば　静的ファイルである必要は無い

HTML 側


<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>HTML雛形</TITLE>
<STYLE type="text/css">
* {
	font-size: 12px;
}
</STYLE>
</HEAD>
<BODY>

<DIV
	id="area"
	style='
		width:400px;
		background-color:#A0B9BD;
	'
>
<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="inner.php?no=987">
</SCRIPT>
</DIV>

</BODY>
</HTML>

PHP 側


<?
header( "Content-Type: text/javascript; Charset=euc-jp" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

?>
document.write( "<SPAN style='color:red'><?= $_GET['no'] ?></SPAN>" );

PHP 側でテーブル( MySQL )に更新してアクセスカウンタを実装


<?
header( "Content-Type: text/javascript; Charset=shift_jis" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

# **********************************************************
# 接続
# **********************************************************
$Connect = @mysql_connect( "localhost", "root", "" );
mysql_select_db( "lightbox", $Connect );

# 一行一列しかないテーブル( 初期値 : 0 )
$Query = "update counter set access_count = access_count + 1";
mysql_query( $Query, $Connect );

$Query = "select * from counter";
$Result = mysql_query( $Query, $Connect );
$Column = mysql_fetch_array( $Result );

# **********************************************************
# 接続解除
# **********************************************************
mysql_close( $Connect );

?>
document.write( "<SPAN style='color:red'><?= $Column[0] ?></SPAN>" );

指定したページ以外は使用できないようにする

HTML に埋め込めるという事は、そのままでは誰でも使えるという事なので、
呼び出し元の URL を使用してアクセス制限を行います　

localhost では実行できるが、PC 名だとアクセスできない


<?
header( "Content-Type: text/javascript; Charset=euc-jp" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

$target = "http://localhost/php/";

if ( substr( $_SERVER['HTTP_REFERER'], 0, strlen( $target ) ) == $target ) {
	# **********************************************************
	# 接続
	# **********************************************************
	$Connect = @mysql_connect( "localhost", "root", "" );
	mysql_select_db( "lightbox", $Connect );
	
	# 一行一列しかないテーブル( 初期値 : 0 )
	$Query = "update counter set access_count = access_count + 1";
	mysql_query( $Query, $Connect );
	
	$Query = "select * from counter";
	$Result = mysql_query( $Query, $Connect );
	$Column = mysql_fetch_array( $Result );
	
	# **********************************************************
	# 接続解除
	# **********************************************************
	mysql_close( $Connect );
}
else {
	$Column[0] = 'アクセスできません';
}

?>
document.write( "<SPAN style='color:red'><?= $Column[0] ?></SPAN>" );

document.write された内容を確認するには

このサンプルでは、id を持つ DIV 内で処理しているので、以下の内容をアドレスに入力して確認できます


javascript:alert(document.getElementById("area").innerHTML)

本格的に内部の内容を調べる場合は、Firebug lite を使用して下さい