ページを遷移させずにHTMLに他ページの内容を読み込む方法

-
カテゴリー:
javascript 

あまりケースとしては無いような手法なのですが、サイト全体を通してBGMをかけたい時など、インラインフレームが使えないなどの成約がある場合に便利だったので、メモ程度に記載させていただきます。
※以下コードはサンプルです。

まず、index.htmlのHTMLがこちら

内容はかなり簡素ですが、#navi内のリンクがクリックされると#main_frame内にそのリンク先のHTMLが読み込まれるようにjavascriptで制御します。

ページの内容自体は、top.html、page1~4.htmlにそれぞれ記載します。

javascriptは、jqueryが読み込まれていることが前提で、以下のコードを記述します。

#navi内のリンクがクリックされた際の処理をe.preventDefault()で無効化し、リンク先のURLを$(this).attr(‘href’)で取得しています。
そして、$(‘#main_frame’).load(url)でそのURLの内容を#main_frameに読み込んでいます。

以下のサンプルページより動作のチェックが行えます。※スタイルシートもindex.htmlのソースに記載されています。

サンプルページ

サイトのリニューアルを終えて

-
カテゴリー:
雑記 

なんとかHTMLコーディング代行サービス「Speed-ONE(スピードワン)」のリニューアル完了しました(汗

 

今年の3月頃にデザイナーさんにリニューアル用のデザイン発注して、仕事が急激に忙しくなったため、しばらく放置していたのですが、なんとか公開までこぎつけました。
まだ、コードが荒いので、仕事の合間を見てコードの改善をしたり、コンテンツのマイナーチェンジ等々進めたいと思います。

 

今年からの計画で、今複数展開しているサービスサイトのSEOを個別にするのではなく、このブログで総合的なSEO、サービスサイトへの誘導に繋げられたらと考えています。

そのため、今回のリニューアルでは、今までのサイト構成にとらわれず、かなりシンプルなつくりにしました。

この戦略、うまくいくといいなぁ~