こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

4つの内2つのブラウザ(IEとGC)で動作しない。

html, javascript(jQuery)の初歩を使って超小型ウェブサイトを作成致しました。
作りたいのは、index.htmlファイルにホームページ(HP)を記述し、必要に応じてサブのhtmlファイル(a.html, b.htmlなど)を読み出し、HPの所望の場所にその内容を表示する仕組みです。
具体的には、ホームページをT字型に分割し、Tの上部にタイトルを表示、左側(左コラム)に項目を表示して、項目のどれかをクリックすると別のhtmlファイル(a.htmlやb.htmlなど)に記載された記事の内容を右側(右コラム)に表示したいのです。HPのjpg図を添付させて頂きましたのでご参照頂ければ幸いです。

以下のお示し致しましたプログラムをローカルで動かしてみましたところ、Firefox(v7.0.1)とSafari(v5.1.7)では所望の動作を致しました。一方、InternetExplorer(IE) (v11.0.x)とGoogleChrome(33.0.x)では、項目の表示までは所望の動作を致しましたが、項目をクリックしても、別htmlファイルの内容を右コラムに表示できませんでした。

このウェブを少なくとも上の4つのブラウザで動作させたいのですが、いわゆるクロスブラウザの問題なのか、あるいはもっと初歩的な誤りを犯しているのか、初心者ですので全くと云っていいほど見当がつきません。
まことにお手数ですが、誤りをご指摘頂き、正しい記述方法をご教示頂きたくお願い申し上げます。また併せて、この辺りのことについて筋道だった説明があるサイト、あるいは書籍をご紹介頂ければ幸いです。

以下はindex.htmlとサブの.htmlファイルの概要とプログラムのリストです。ご多忙中のところ本当に申し訳ありませんがどうぞよろしくお願い申し上げます。

ファイルの概要です。
1)index.htmlファイル
・ホームページ。
・DOCTYPE宣言はhtml4.0Transitionalの互換モード。
・<scripttype="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js">
 はjQueryライブラリーのアクセス宣言。
・$(document).ready(function(){ から }) がjavascript (jQuery)
2)pagesフォルダ
・today.html, tomorrow.html, space.htmlのファイルを格納。
・それぞれ項目の表題と記事を記述するファイル。
3)ファイルのディレクトリ
・上の2つのファイルとフォルダはローカルのディスクの一つのフォルダに格納。
・ディレクトリはそれぞれ
 /index.html, /index.html/pages,

プログラムのリストです。cssは簡単なので別ファイルにせず直接htmlに書き込みました。
1)index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML5,Web Audio API" />
<meta name="description" content="勉強会です。" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>試験</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//初期状態でのロードファイルを指定
$('#contentsBox').load('pages/today.html');
//クリックで各コンテンツを切り替え
$('.switchButton').click(function(){
var loadContents = $(this).attr('title');
$('#contentsBox').load('pages/'+loadContents+'.html');
});
});
</script>
</head>

<body style="font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;">
<style type="text/css">
* { margin:0; padding:0;}
ul {margin-left:35px; margin-top: 10px;}
ul li {font-size:4mm; color:maroon; margin-top:1px; margin-bottom:1px;}
ul a {color:maroon; }
div.left-column{float:left; align:left; border-right:medium solid #800000; width:24.7%; height:100%; background-color:#f8dce0;}ul {margin-left:35px; margin-top: 10px;}
</style>
<div style="width:100%; background-color:#800000;">
<h1 align="center" style="padding-top:15px; padding-bottom:15px; color:white;">
ここにサイト名<br>
</h1>
</div>
<div class="left-column">
<ul>
<li class="switchButton" title="today">今日のできごと</li>
<li class="switchButton" title="tomorrow">明日のお天気</li>
<li class="switchButton" title="space">宇宙のはじまり</li>
</ul>
</div>
<div id="contentsBox" style="float:right; border-left: medium solid #800000; width:74.5%; height:100%; background-color:#f8dce0;">
</div>
</body>
</html>

上のjQuery の部分はhttp://blog.nico0927.net/20111103/jquery/316 さんの
「jQueryでdiv要素の中身にHTMLファイルを読み込みボタンで切り替え」から拝借しています。
2)pagesフォルダの例えばtomorrow.htmlファイルのリストは
<h3 style="margin-left:10px;">明日のお天気</h3>
<p style="margin:0px 10px;">平成26年3月7日10時50分 気象庁予報部発表... 明日…となる所があるでしょう。</p>
です。
today.html, space.htmlも同様です。

以上長々と書き連ねました。まことにお手数ですがよろしくご教授頂きますようお願い申し上げます。

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2014-04-02 12:23:00

QNo.8538551

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

サーバにアップするか、ローカルでhttpdを動かしてテストすると正常に動作すると思います。
セキュリティー等の問題で、ローカルファイルへのAjax通信が制限されているブラウザではjQueryのloadでローカルファイルを読み込めない場合があります。

投稿日時 - 2014-04-02 13:06:55

あなたにオススメの質問