로딩이 길어지는 문서에
페이지가 다 뜨기전에 '로딩중' 이라는 글씨를 나오게 합니다.

헤드부분에
<script language=javascript>
n = document.layers
ie = document.all
function hide() {
if (ie || n) {
if (n) document.Load.visibility = "hidden"
else Load.style.visibility = "hidden"
}
}
</script>

<body>에
<body text=black bgcolor=white onload="hide()">

<script language=javascript>
if(ie || n) document.write('<div id="Load" style="position:absolute;width:100%;height:100%;top:0;left:0;background-color:#ffffff;z-index:5">페이지 로딩중 보여줄 내용 (플래시도 됩니다.)</div>')
</script>
2007/11/22 15:23 2007/11/22 15:23
http://msdn.microsoft.com/archive/default.asp?url=/archive/en-us/samples/internet/imedia/netshow/advancedbuttons/default.asp

재생, 중지, 소리 끄기 등 버튼에 쓰는 javascript 함수가 있습니다.

Windows Media

Advanced Buttons


Description

Goal: Incorporate buttons in a Web page that control a variety of features of the Windows® Media Player in both Microsoft® Internet Explorer and Netscape Navigator® .

This sample describes how to incorporate advanced buttons for the Windows Media Player into a Web page. These buttons will work in any browser that supports the Windows Media Player Plug-in and JavaScript.

Since Internet Explorer utilizes the ActiveX model for incorporating components into HTML pages and Navigator uses its own plug-in architecture, we must write our code in a way that will work in both environments. The ActiveX model allows properties, methods, and events to be accessed directly through the Document Object Model (DOM -- a fancy term used to describe how elements on a Web page are addressed). The plug-in model only allows for methods to be passed directly to the browser. As such, to write code for both browsers, the code needs to perform a browser check (sometimes called a browser sniff) and run browser-specific code.

More Details

The Windows Media Player has about one hundred properties and over 20 methods. The Media Player methods (Play, Pause, Stop, etc) will work with both the ActiveX control and the plug-in as they stand. Accessing and modifying the properties of the Media Player, however, requires somewhat different scripting syntax between the ActiveX control and the plug-in. For a given property, such as the read-write "FileName" property, plug-in code must access the property using the SetpropertyName and GetpropertyName methods.

The statement MediaPlayer1.FileName = "demo.asf"; for ActiveX browsers is analogous to the following statement for the plug-in: MediaPlayer1.SetFileName("demo.asf");. This code would set the FileName property of the Media Player to "demo.asf".

To get information about a plug-in property, the property must be retrieved by invoking a GetpropertyName Method. For example, the statement var sFileLoc = MediaPlayer1.FileName; for ActiveX browsers is analogous to the following statement for the plug-in: var sFileLoc = MediaPlayer1.GetFileName();.

More examples follow.

Code to Include

We'll start with our generic cross-browser code embedding code. This code will instantiate the Media Player ActiveX control for browsers which support ActiveX, and the Media Player plug-in for browsers that don't:

<OBJECT ID="MediaPlayer1" width=160 height=112 
	classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
	codebase=
	"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
        standby="Loading Microsoft® Windows® Media Player components..." 
        type="application/x-oleobject">
  <PARAM NAME="FileName" VALUE="mms://windowsmediaserver/path/your-file.asf">
  <PARAM NAME="ShowControls" VALUE="0">
  <EMBED type="application/x-mplayer2" 
	pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
	SRC="mms://windowsmediaserver/path/your-file.asf"
	name="MediaPlayer1"
	width=160
	height=112
	ShowControls=0>
  </EMBED>
</OBJECT>

Next, we'll define a form and some buttons:

<FORM NAME="myButtons">
   <INPUT NAME="btnPlay" TYPE="Button" VALUE="Play" onclick="document.MediaPlayer1.Play();">
   <INPUT NAME="btnPause" TYPE="Button" VALUE="Pause" onclick="document.MediaPlayer1.Pause();">
   <INPUT NAME="btnStop" TYPE="Button" VALUE="Stop" onclick="document.MediaPlayer1.Stop();">
  
<INPUT NAME="btnShowControls" TYPE="Button" VALUE="Show Controls" onclick="showClick()"> <INPUT NAME="btnHideControls" TYPE="Button" VALUE="Hide Controls" onclick="hideClick()">
<INPUT NAME="btnMute" TYPE="Button" VALUE=" Mute " onclick="muteClick()"> </FORM>

In the code above, all of the buttons make calls through JavaScript. The first three buttons use JavaScript to make calls directly through the Document Object Model (DOM), calling methods of the Media Player.

The rest of the buttons call JavaScript functions, allowing for more advanced scripting, such as accessing Media Player properties for both the ActiveX control and the plug-in.

Now we'll add the JavaScript functions:

<SCRIPT LANGUAGE="JavaScript">
// Browser sniff -- the following code does a very simple browser check and rates the 
//     browser as either Internet Explorer on a Win32 platform or not, so that we 
//     know to use the ActiveX model, or the plug-in Model.
var sBrowser = navigator.userAgent;  
if ((sBrowser.indexOf("IE") > -1) && (navigator.platform == "Win32"))
{
	sBrowser = "IE";
} else {
	sBrowser = "nonIE";
}
// end browser sniff

function showClick() // This function is called by the btnShowControls button.
                     // It sets the ShowControls property of Media Player to true.
{
	if (sBrowser == "IE") {
		document.MediaPlayer1.ShowControls = true;
	} else {
		document.MediaPlayer1.SetShowControls(true);
	}
}

function hideClick() // This function is called by the btnHideControls button.
                     // It sets the ShowControls property of Media Player to false.
{
	if (sBrowser == "IE") {
		document.MediaPlayer1.ShowControls = false;
	} else {
		document.MediaPlayer1.SetShowControls(false);
	}
}

function muteClick() // This function is called by the "Mute" button.
                     // It toggles the state of the Mute property of the Media Player.
{
	var bMuteState;

	if (sBrowser == "IE") {
		bMuteState = document.MediaPlayer1.Mute;
	} else {
		bMuteState = document.MediaPlayer1.GetMute();
	}

	if (bMuteState == true) {
		document.myButtons.btnMute.value="Mute";
		if (sBrowser == "IE") {
			document.MediaPlayer1.Mute = false;
		} else {
			document.MediaPlayer1.SetMute(false);
		}
	} else {
		document.myButtons.btnMute.value="Un-Mute";
		if (sBrowser == "IE") {
			document.MediaPlayer1.Mute = true;
		} else {
			document.MediaPlayer1.SetMute(true);
		}
	}
}

</SCRIPT>

There are three main parts to this script: The browser sniff, the showClick() and hideClick() functions, and the muteClick() function.

The browser sniff is called immediately, before the page is finished loading. It simply grabs the userAgent property of the navigator object. Each browser has its own userAgent string, which can be used to tell the name and version of the browser. Using the intrinsic indexOf() function, we're determining whether or not this is a Win32 Internet Explorer based browser (which then supports ActiveX controls) or not, and storing that information in a global string variable (sBrowser).

The showClick() and hideClick() functions are called by the btnShow and btnHide buttons. They use the browser sniff information (sBrowser) to set the ShowControls property of the browser for both the plug-in and the ActiveX control.

The muteClick() function is the handler for the btnMute button. This is a more advanced button that toggles the mute property of the Media Player between true and false. First, it retrieves the Mute property of the Media Player, and determines whether the property is set to true or false. Then, based on this information, it toggles the state of the Mute property, i.e. if the Mute property is set to true, the function sets it to false, and vice versa. Also, the function resets the value of the button so that the user can tell what the button actually does.

Browser/Platform Compatibility and other Requirements

This code will work with Internet Explorer 4+, and Netscape Navigator 4+ on platforms that support the Windows Media Player plug-in and ActiveX control.

Related Links

2007/11/22 15:23 2007/11/22 15:23
[소스] 속도를 위해 데이터를 접속자 메모리에

주로 관리자만 게시물을 올리고 접속자는 열람만 하는 데이터 베이스의 경우,
그리고 대부분의 사용자가 요구하는 데이터가 1M 미만인 경우,
접속자가 접속하는순간 데이터 베이스의 내용을 그대로 접속자의 메모리에 올려 버려서 그다음은 접속자가 계속 검색을 하는 내용이 모두 서버와의 교신 없이 이루어 지게 하면 서버의 부하를 비약적으로 줄일 수 있습니다.
특히 연구 관련 사이트에서 한번 접속하면 한두시간씩 검색을 하는 경우 유용하지요.
그럴수 밖에 없는 것이 데이터 베이스 쿼리도 한번, 서버에서 자료를 주는 것도 접속한 순간 한번에 끝나는 것으로써 서버에서는 세션 등의 관리조차 필요없어 지니까요.

이것은 프레임을 사용해서 합니다.

*** index.html ***

<html>
<head>
<title>Welcome</title>
</head>
<frameset rows="100%,0%" frameborder="NO" border="0" framespacing="0">
<frame name="main" src="home.html">
<frame name="process" scrolling="NO" noresize src="initializer.html">
</frameset>
</html>

여기서 세개의 페이지가 로딩 되는데요.
top 프레임은 html자체로는 아무 내용도 없는 것 같지만 process프레임에서 돌아가는 javascript가 모든 데이터를 테이블 통째로 top프레임의 메모리에 올려놓습니다.
main프레임에서는 이 데이터를 이용해서 고객에게 검색 결과를 보여주게 되며 서버와는 고객이 refresh버튼을 누르지 않는 이상 교신하지 않습니다.
"검색" 버튼을 누른다고 해도 페이지를 새로 로드해서 보여주는 것이 아니라 javascript 함수로 페이지 자체를 새로 build해서 document.writeI()으로 써주기 때문에 고객의 입장에서는 페이지가 새로 로드된 것 같지만 실상은 서버와 아무런 통신이 없지요.

그러나 프로세스 프레임을 고객이 굳이 보게되면 (아무리 보이지 않는 프레임이라 해도 볼수 있으니까) 자료 테이블을 통째로 보고 황당해 할테니까 고객의 안심을 위해서 약간의 팁이 필요한데 아래 주석 달린 소스를 읽어보세요.
물론 이것은 얼마든지 브레이크 하고 열람할 수 있기 때문에 절대로 절대로 보안상의 이유로는 쓸수 없으며 단지 고객을 편안하게 해주기 위해서 하는 것 뿐입니다.

*** initializer.html ***
//데이터 구조에 대한 PHP클라스 정의가 여기 들어 있습니다. 디비를 직접 엑세스 하는 것은 이 페이지 뿐이니 다른 페이지에서는 사용하지 않습니다. (다른 페이지에서는 PHP자체를 사용하지 않습니다)
<?require "dbclass.inc";?>
<html>
<head>
<title>Data Loader</title>
//데이터 구조에 대한 Javascript class 정의가 이 파일에 들어 있습니다. 데이터를 사용하기 위해서는 메인 프레임의 페이지에서도 물론 이 스크립트 파일을 사용해야지요.
<script src='include/jslibrary.js'></script>
<script>
<?
$s = "
var w = window;
var t = window.top;
var d = window.document;
//모든 정보는 탑 프레임의 메모리에 상주하는 windows.top.db 에 저장됩니다.
t.db = new Object();
";

$preload = array();

$preload["mydata"] = "SELECT * FROM mydata ORDER BY reg_date;";
$preload["mydata2"] = "SELECT * FROM anotherdata ORDER BY subject;";

// 모든 데이터는 이 프레임이 아니라 Top 프레임의 메모리에 저장되기 때문에 이 프레임이 사라져도 상관 없다.
foreach($preload as $key=>$val) {
$q = sql_q($val);
$class_name = "C".$key;
$s .= 't.db.'.$key." = new Array();n";
while ($r = new $class_name(sql_r($q))) {
$s .= 't.db.'.$key.'[t.db.'.$key.'.length] = '.$r->clientize().";n";

}

// 탑 프레임의 Flag에 표시해서 데이터 업로드가 끝났다는 것을 표시. 메인 페이지에서 참조하고 데이터 엑세스를 시작할 수 있도록

$s .= "
t.loaded = true;
" ;

// 자바스크립트 텍스트를 뿌려주기 전에 약간 읽기 편하게(?) 만들어준다.
// 모든 코멘트 삭제, 줄바꿈, 탭, 필요없는 스페이스 삭제.
$search = array("'([rn])s+'i", "'(//.*n|/*/.**/|[trn])'si", "'s*=s*'i", "',s+'i", "';s+'i");
$replace = array("", "", "=", ",", ";");

// 거기다가 다시 보기좋게(?) encoding 해줌
$s = rawurlencode(preg_replace($search, $replace, $s));

// 자바스크립트에서 받은 다음에 decode해서 사용하도록 (자바스크립 1.1부터 지원)
echo "eval(unescape("$s"));";
?>

// 아무리 알아보기 힘들다고 해도 역시 않보여 주는 것이 최고!
// 페이지가 로딩되는 순간 다시 모든것을 지워버린다.
// 페이지를 다 만든다음 버퍼에서 뿌려주기 때문에 로딩이 시작된후 끝나고 지워지는데 까지 걸리는 시간은 0.01 초?
function done() {
document.write(" ");
document.close();
}

</script>
</head>
<body onload="done();">
</body>
</html>
2007/11/22 15:21 2007/11/22 15:21
<body>
    <iframe src="http://naver.com" width=220 height=80 scrolling=no frameborder=0 name="aaa"></iframe>   
    <iframe src="http://empas.com" width=220 height=80 scrolling=no frameborder=0 name="bbb"></iframe>

    <script language="javascript">
    <!--
    function doRefresh() {
        parent.aaa.location.href='http://naver.com';
        setTimeout("doRefresh()",5000); //5초
    }
    doRefresh();
    //-->
    </script>
</body>
2007/11/22 15:20 2007/11/22 15:20