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

解決済みの質問

htmlファイルのインクルード

htmlファイルのインクルード

あるページを複数の別のhtmlファイルを読み込んで構成しようと思っています。

以下がソースなのですがFirefoxでは

samplesample
テストテスト

と表示されるのですが、Internet Explorerでは

テストテスト

のみが表示されsample.htmlが読み込まれません。

何がいけないのでしょうか。
よろしくお願いします。

[index.html]
<html>
<head>
<title>テストページ</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function my_include(id, file) {
document.open();
document.write('<div id="' + id + '"></div>');
document.close();

var options = {};
options.method = "get";
options.asynchronous = true;
new Ajax.Updater(id, file, options);
}
</script>
</head>
<body>
<div id="headers"></div>
<script type="text/javascript">my_include("headers","sample.html");</script>
テストテスト
</body>
</html>


[sample.html]
<head>
<title>sampleページ</title>
</head>
<body>
samplesample
</body>
</html>

[バージョン情報]
Firefox 3.6.3
Internet Explorer 8
prototype.js 1.6.1

投稿日時 - 2010-05-09 16:09:58

QNo.5882977

困ってます

質問者が選んだベストアンサー

ajaxは非同期に実行されています。同じ関数の中にある
document.open();
document.write('<div id="' + id + '"></div>');
document.close();
のレンダリングが完了する前にレスポンスされているのでは?
new Ajax.Updater(id, file, options);
の前に
alert("ちょっと待つ");
を入れて試してみてはどうでしょう。

投稿日時 - 2010-05-10 14:41:42

補足

alert("ちょっと待つ");
を入れてもIEではダメでした。
Firefoxでは大丈夫なんですよね。。

<html>
<head>
<title>テストページ</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function my_include(id, file) {
document.open();
document.write('<div id="' + id + '"></div>');
document.close();
alert("ちょっと待つ");
var options = {};
options.method = "get";
options.asynchronous = true;
new Ajax.Updater(id, file, options);
}
</script>
</head>
<body>
<script type="text/javascript">my_include("headers","sample.html");</script>
テストテスト
</body>
</html>

投稿日時 - 2010-05-10 23:24:10

お礼

自己解決しました。
prototype.jsはieだとローカルファイルにアクセスできないんですね。。
Webサーバ上にアップしたらできました。

初心者ですみません。
お騒がせしました。

投稿日時 - 2010-05-11 01:19:15

ANo.2

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

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

回答(2)

ANo.1

> document.write('<div id="' + id + '"></div>');

> <div id="headers"></div>

ID重複が原因じゃないでしょうか?
どちらかを消すと良いかもしれません。

投稿日時 - 2010-05-10 13:30:50

補足

失礼しました。ソースが間違っていました。。

<div id="headers"></div>を消しても駄目でした。。

投稿日時 - 2010-05-10 14:14:07

あなたにオススメの質問