ホームページビルダー/JavaScript編
Top > JavaScript編トップ > 小窓を開く
ウィンドウ
- 小さなウィンドウのツールバーやメニューバーの表示/非表示について
- 小さな別ウィンドウを開くA (設置済みサンプル)
- 小さな別ウィンドウを開くB (ビルダーのイベント設定に手を加える)
- 二つのフレーム内容を同時に変更する
ウィンドウのツールバーやメニューバーの表示/非表示について
メニューバーの表示/非表示は、yes/no または 1/0 で設定できます。
下記の「小さな別ウィンドウを開くA」であれば、toolbar location status menubarはnoになっていますが、scrollbarのみyesになっているのでスクロールバーのみ表示されます。
（図にあるwidthとheightについてはIEの場合です。他のブラウザではサイズに違いがあるかもしれません。）
小さな別ウィンドウを開く A （設置済みサンプル）
設置済みサンプルは別ウィンドウで開きます 
「小さなウィンドウを開く」設置済みサンプルページ
設置済みサンプルを利用しないで利用する場合
- 小さいウィンドウを開くソースをコピーし、HEAD内へ貼り付けてください
ソースの貼り付け方はこちらを参考にしてください。 HTMLソースの挿入
- 「小さなウィンドウを開く」設置済みサンプルページ を参考にソースを修正して下さい。
- 下記のソースをコピーし、BODY内へ貼り付けてください。（開くボタン）
<FORM><INPUT type="button" value="New window" onclick="newwin()"></FORM>
小さな別ウィンドウを開く B （ビルダーのイベント設定を修正する）
同一ページにいくつかの同サイズ指定のウィンドウを開くときに利用できます。
ただし、この方法では同一ページに2つ以上のウィンドウサイズの指定はできませんのでご注意ください。２つ以上のウィンドウサイズを指定して開きたい場合は「小さな別ウィンドウを開く A」を参考にしてください。
※V9では、こちらで紹介している方法をやってみても、ウィンドウが二重に開いたりと、思ったような結果が得られない場合があります。その場合は、ビルダーのサイトから修正プログラムの適用を行ってください。
●設置方法
- リンクの設定を行います。
リンクしたい文字列をドラックし、右クリック→リンクの挿入(または、挿入→リンク)
リンク挿入画面の「ファイル名」の箇所に # を入力
※注意
# で設定すると元となるページが小窓を開いたときに上の方へ戻ります。
リンクした位置から元のページを移動させたくない場合は、 # の代わりに javascript:void(0) と入力します。（のり太さん情報） - 次に、イベントの設定画面を呼び出します
リンク挿入画面の下の方に「イベント」というボタンがあります。こちらをクリックします。
すると、イベント設定の画面が表示されます。
( イベントの設定は、リンク挿入画面からではなく、#へのリンクをはった箇所へカーソルを持っていき、右クリック→イベントの設定でも設定できます。) - 次に、イベントの設定を行います。
イベント箇所は「onclick」を選択、アクション箇所は「ウィンドウ」をダブルクリック→「新しいウィンドウを開き、指定したURLへジャンプします」をダブルクリック→「参照」でファイルを選択→OK
これで「イベント」を利用して別ウィンドウを開くことができます。 - 次に、ウィンドウサイズを指定します。
HTMLソースを開くと
<SCRIPT language="JavaScript">というスクリプトが挿入されています。
<!--HPB_SCRIPT_CODE_40
function _HpbJumpURLinNewWindow(url)
{
if (url != '')
{
window.open(url, '_blank');
}
}
//-->
</SCRIPT>
この中の window.open(url, '_blank'); の後にウィンドウサイズを指定するソースを追加します。
例えば、幅と高さが200ピクセルのものであれば↓このようになります。
window.open(url, '_blank', "width=200,height=200");
スクロールバー・メニューバー・ツールバーを表示させたい場合は↓このようになります
window.open(url, '_blank',"toolbar=yes,menubar=yes,scrollbars=yes, width=200,height=200");
２回目以降、リンク設定時にはウィンドウサイズの指定は必要ありません。
