A revolving earth (earthani.gif--64x64) Beaverland Net
ジャバスクリプトを易しく教えて! JavaScript Made Easy!
 
English Version (english.gif--140x51)

 

JavaScript Made Easy! logo (javascrt.gif--140x360)

 

Slangs not found in a dictionary logo (slangs.gif--140x260)

 

Beaverland Japonica banner (japonic3.gif--140x360)

 

Study in Canada Home Page logo (homepg.gif--160x160)

  1. 出願
  2. 学費・生活費
  3. ビザ
  4. 渡航準備
  5. バンク–バ–
    に留学しよう!
  6. BC州の教育
  7. カナダの教育
  8. 私立高校願書
    の一例 (生徒用)
  9. 私立高校願書
    の一例 (両親用)
  10. 大学入学案内
  11. 私立高校
    入学案内
  12. 全寮制私立高校
    入学案内
  13. 全寮制私立高校
    授業料
  14. 公立高校
    入学案内
  15. バンク–バ–
    公立高校
    2002 / 2003年度
    入学要項
    及び授業料
  16. 語学専門学校
    授業料一覧表
  17. バンク–バ–案内
  18. 御意見・御質問コ–ナ–
  19. 帰国子女の受け入れ
  20. BC州の官公庁
    市町村・大学・高校へのリンク
  21. 留学生のための銀行利用法
  22. 高校生1000人に留学補助

onstore.gif (140x93)

beavbook.gif (120x160)

beavcomp.gif (120x160)

beavmovi.gif (120x160)

beavgift.gif (120x160)

beavtrav.gif (120x160)

music.gif (50x50) Beaverland Music
 
ポップアップ・ウインドー
の簡単な作り方
June 16, 2003

次に示すのは、最も簡単なポップアップ・ウィンドーの作り方です。

<SCRIPT language="javascript">
<!--- to hide

function myWindow() {

  myPopup=open("","myWin","Height=200,Width=300")
  myPopup.document.write("This is my Popup window!")
  myPopup.document.close()
  }

//--->
</SCRIPT>

<FORM>
<input type="button"
  value="ここをクリックするとポップアップ・ウィンドーが開きます。"
  onClick="myWindow()">
</FORM>

Java Bean pointing downward (lookdown.gif--55x68)

このサイトでは正常にポップアップ・ウィンドーが開きますが、プロバイダーによると、このポップアップ・ウィンドーを禁止しているところがあります。 無料でサイト開設サービスを提供しているプロバイダーに、こういう、こそくなことをする所があります。

なぜか?
広告が入れにくいということがその理由です。しかし、これは技術的に可能なことで、長い眼でみれば、こういうことをするプロバイダーは、 たくさんのお客さんを逃すことになるでしょう。このことに早く気づいて止めてくれるとよいのですが。。。

その例として、このリンク(TARGET Made Easy!)をクリックしてみてください。 ポップアップ・ウィンドーを作るセクションへ連れて行ってくれます。 そこで、バーをクリックすると、下に示すような画面が現われます。 (新しいウィンドーが開きます、このページへ戻るには、新しいウィンドーを閉じてください。)

Screen with a blank popup window (popup01.jpg--479x384)

ポップアップ・ウィンドーが開いているように見えますが、中身は空白です。 画面の左下のステイタス・バーを見ると、エラー・アイコンが出ています。

error icon on the status bar (popup02.jpg--100x60)

ステイタス・バーって何ですか?
私の画面には見当たりませんが。。。

下に示すように、メニュー・バーのVIEWをクリックすると、プルダウン・メニューが現われます。Status Bar をクリックすると左下に ステイタス・バーが現われます。

VIEW pulldown menu (popup04.gif--270x278)

error icon on the status bar (popup02.jpg--100x60) そのステイタス・バーの左端に顔をのぞかせている、黄色い小さな三角形のエラー・アイコンをダブル・クリックすると次に示すようなエラー・メッセージが現われます。

Javascript error message (popup03.gif--438x290)

『アクセス禁止!』―つまり、プロバイダーがポップアップ・ウィンドーを使わせないようにしているわけです。

おそらく、2、3年のうちには、このような小細工はしなくなるでしょう。
それには、前例があります。信じられないかもしれませんが、以前は、ジャンプ・アクセスを禁止していたプロバイダーがけっこうありました。

ジャンプ・アクセスというのは、上のリンクをクリックしてみると分かりますが、ページの初めではなくて、なかほどへ、あなたを案内します。 これを禁止する理由は、ページの頭の広告を避けて通る、ということでした。もちろん、こういうことをするのは、 無料サイト開設サービスを提供しているプロバイダーだけです。

ジャンプ・アクセスってどうやるの?

それはこのページ(ジャンプ・アクセスってどうやるの?)を見てください。新しいページが開きます。 このページへ戻るには、そのページを閉じてください。

 

他のページをポップアップ・ウィンドーの中に入れて出すにはどうするの?

 

このリンクをクリックするとジューンを紹介するページがポップアップ・ウィンドーの中に入って飛び出します。

 

上のデモは次のようなコードから成り立っています。

<script language="javascript">
<!--- to hide

function newWindow(pic) {
  newWin = window.open(pic, 'newWin',
    'scrollbars=yes,status=yes,toolbar=yes,
    menubar=yes,location=yes,width=600,height=400')
  }

//---->
</script>

<a href="javascript:newWindow('june4.html')">このリンクをクリックする</a>とジューンを紹介するページがポップアップ・ウィンドーの中に入って飛び出します。

<form>
<input type="button" value="ボタンでやるとこうなります。"
  onClick="newWindow('june4.html')">
</form>

注意事項

  • window.open() の3つめの、ながーいパラメターは、見易くするために改行していますが、実際には、キャリッジ・リターンは入っていません。改行すると、正常に起動しません。ウィンドーの大きさが指定したサイズにならなかったりします。

  • 初めの例では、window.open() ではなく、open() となっています。これだけでも、あなたのブラウザーは間違いなくウィンドーを作ってくれますが、正式にはwindow.open() と書かなくてはなりません。この window はジャバスクリプト語に従うと、ウィンドー・オブジェクトという意味で、このページは document オブジェクトになるわけです。ジャバスクリプトのほとんどすべてのファンクションはこのオブジェクトに対して働きかけるわけです。 したがって、window.open() と書くと、『ウィンドー・オブジェクトを開け』という意味になるわけです。open() だけでは、もの分かりの悪いブラウザーだと、一体何を開くのか考えてしまうというわけです。

    このウィンドー・オブジェクトに対しては、ただ単にオープンしたり、クローズしたりだけでなく、まだまだ、いろいろとマニピュレートできます、詳しくは、このページ(WINDOW Object Basics)を見てください。

  • したがって、初めの例で、myPopup.document.close() と書いてありますが、これは、ウィンドーそのものをクローズするのではなくて、window.open() でつくったウィンドー・オブジェクト(myPopup)のなかのページ(document)をクローズする、つまり、書き終える、という意味です。

  • myWin というのは、ウィンドー・オブジェクト(myPopup)に付けた、参照用の名前です。TARGET="anyName" のなかに書く名前と同じようなものだと考えてください。このTARGETについて、もっと知りたいときは、このページ(TARGET Made Easy!)を見てください。

ページでなく、写真だけを
ポップアップ・ウィンドーに入れて
出せますか?

下に示すように、原則として出せます。

Popup window with a picture (popup05.jpg--409x307)

このような場合には、下のように書きます。

<form>
<input type="button" value="写真だけのポップアップ"
  onClick="newWindow('../images/june320.gif')">
</form>

しかし、上のバーをクリックしてみれば分る通り、あなたにはできません。 なぜか? その理由は、次のページ(なぜ、写真だけをポップアップ・ウィンドーに入れて出せないの?)で説明します。

 

Chipmunk pointing to the left (chipleft.gif--178x156) Related Links


筆者紹介
Akira Kato (kato.jpg--180x135)
  • 日本とカナダの大学で教育を受ける。
  • 横浜にある大手の電器メーカーでコンピューターのソフトウエアの開発に従事する。
  • カナダのノースウエスト隼州政府・財務省に勤務する。
  • バンクーバーのランガラ・カレッジおよびサレーのクワンテレン・カレッジで講師を勤める。
  • ヨーロッパ、東南アジア、中国、北米を幅広く旅行する。
  • 現在、経営コンサルタント、フリーランス・ライターとして活躍している。
  Comments
 
widthと height を書かずに実行すると、どうなりますか?
    - 上海帰りのリル

いい質問です。試しに、ここでやってみます。

上のデモは次のコードから成り立っています。

<SCRIPT language="javascript">
<!--- to hide

function myWindow2() {
  myPop=open("","myWin2","");
  myPop.document.write("<H1>This is my Popup window!</H1>");
  myPop.document.close();
  }

//--->
</SCRIPT>

<form>
<input type="button" value="ここをクリック!"
  onClick="myWindow2()">
</form>

    - Akira

 
 



御意見・御感想
とても良い 良い まあまあ 良くない 最低

お名前:
Email アドレス:
御感想を書いて下さい。



Betty in bikini lingerie (betty31c.gif--232x516) Betty in hot-pant lingerie (betty32c.gif--231x473)

She might try something different
Or you might.
Visit Henry & June Lingerie.


Beaverland ジャポニカ
Re-Discover JAPAN
inserted by FC2 system