ホームページを作成に関する備忘録

prototype window.classを使って、他のHtmlファイルを開く(ちょっと変ですが・・・)

Xhtmlファイル

<head>
<script type="text/javascript" 
src="windows_js_1.3/javascripts/prototype.js"></script>
<script type="text/javascript" 
src="windows_js_1.3/javascripts/effects.js"></script>
<script type="text/javascript" 
src="windows_js_1.3/javascripts/window.js"></script>
<script type="text/javascript" 
src="windows_js_1.3/javascripts/window_effects.js"></script>
<script type="text/javascript" src="new_win.js"></script>
<link href="windows_js_1.3/themes/nuncio.css" 
rel="stylesheet" type="text/css"/>
<link href="windows_js_1.3/themes/default.css" 
rel="stylesheet" type="text/css"/>
</head>

<a href="javascript:open_win()" title="新しいウィンドウ">
新しいウインドウを開きます</a>

new_win.js

function open_win(){
  {winpro = new Window("win1",{url:"new_win.html",width:700,height:300,
  showEffect:Effect.BlindDown,hideEffect:Effect.BlindUp});
  win1.showCenter();}
winpro.setDestroyOnClose();
}

new_win.jsについて

下のリンクをクリックすると新しいウインドウが開きます。
新しいウインドウを開きます

prototype windowのダウンロードはこちらから
JavaScriptが有効ならば別ウインドウ(タグ)で開きます。

まずは、上のリンクから、必要なファイル(windows_js_1.3.zip)をダウンロードしてきます。適当な解凍ソフトで解凍するととても沢山のファイルが出てきますが、必要なファイルは、左のXhtmlファイルのヘッドタグ内に書かれているファイル(prototype.js/ effects.js/ window.js/ window_effects.js/ nuncio.css/ default.css)です。このうち、.jsファイルはwindows_js_1.3/javascripts/フォルダに、cssファイルはwindows_js_1.3/themes/フォルダに私は解凍しました。なお、最小限必要なのは、(prototype.js/window.js)の2ファイルだと思います(う〜ん。いい加減ですが)。そして、左のjsファイルを作り、これもヘッダ内で取り込みます。そして、aタグにより関数を呼び出します。これで、新しいウインドウ内にxhtmlファイルが表示されます。