banner

ページ遷移をさせない

ページ遷移をさせないホームページ

ホームページのリンクをクリックするとリンク先にページ遷移をします。どんなにサイトの容量が少なくしても、ページ遷移が発生すると読み込み時間が必要になります。必要な情報を上手くJavaScriptやjQueryを使うことでページ遷移が無いホームページを作ることができます。代表的な方法としてdisplay:noneを上手く使うことです。表示・非表示をさせたい箇所に対して、クラス名かIDをふります。例としてJavaScriptで

style.display=”block” : 表示
style.display=”none” : 非表示

を使って制御を行います。ホームページ内に読み込んである情報ですがdisplay=”none”にすることで非表示にします。ボタンやチェックBOXの動作等でstyle.displayの状態を切り替えます。該当箇所が、変更されてページ遷移無しで表示の切り替えができます。非表示にする情報は、さまざまあります。文字やフォームの非表示もあります。中には、インラインフレームを隠す場合もあります。インラインフレームは、別のホームページの情報を表示することができます。

例えば、一定の時間に更新処理を行い最新状態を監視したいページの場合は、JavaScriptでタイマーを指定して定期的にインラインフレームのみの更新を行います。こうすることで、ホームページそのものは更新されませんが、インラインフレーム上のものだけで定期更新されます。

display=”none” 状態のインラインフレームを使うと、ホームページの更新をしないでインラインフレームの更新に対して処理を実行ができます。何かしらの更新や変化が起きた瞬間にアラートを挙げたり、画面に表示を行うことができます。一画面内にインラインフレームを複数配置することで、さまざまな情報管理がしやすく成るでしょう。

インラインフレーム上で違うホームページも表示ができます。特定のキーワードが出た瞬間に通知を行うことで、株式やFXや新商品情報の入手のために使うなどで使用します。あとタブを作ることで、タブクリックに対してページの中身を変更するとスマートなサイトが作成できます。jQueryを利用することで、システム部分と連結させて非同期通信しながらデータベースの中身を取得して、該当箇所の変更をします。これは、連結プルダウンで選択した値に対して該当する項目を選択させたい場合に使用します。

Copyright(c)2014 ホームページ制作のクオリティを保つために重要となるルールAll Rights Reserved.