ここから本文です

HTMLについて教えて下さい。 headerを共有出来るようにJavascriptで処理を考えて...

アバター

ID非公開さん

2019/4/1919:57:43

HTMLについて教えて下さい。
headerを共有出来るようにJavascriptで処理を考えています。

index.html の Body には、

<script type="text/javascript" >header();</script>

とし、

script.js には、

function header(){
$.ajax({
url: "header.html",
cache: false,
success: function(html){
document.write(html);
}
});
}

header.htmlは必要な内容を記述しています。

読み込み自体は問題ないのですが、
文字化けが発生しています。※headerのみ。他の本文は問題無し。

色々検索して、
$.ajax({ の中に、

beforeSend: function(xhr){
xhr.overrideMimeType('text/html;charset=Shift_JIS');
}

を追加したら、今度は表示されなくなりました。
function で header を呼び出している中に function を呼び出しているのが、
問題なのかなと考えていますが、解決しません。
回避方法はございますか。

閲覧数:
41
回答数:
3
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

leg********さん

2019/4/1922:23:57

JSファイル「script.js」の中に header()関数があるのですから、
そのファイル中でheader()関数を呼び指せば良いのでは?

つまり、
<script type="text/javascript" src="script.js"></script>
とします。

そして、script.jsファイル には、

function header(){
$.ajax({
url: "header.html",
cache: false,
success: function(html){
document.write(html);
}
});
}
header(); //追記する

または、
onload = header; //カッコは不要

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

プロフィール画像

カテゴリマスター

ois********さん

2019/4/2001:05:49

beforeSend: を追加して表示されなくなったのって、
単なる記述ミスじゃない?

beforeSend: を追加するときに、
$.ajax() に渡すオブジェクト { ~, ~, ~, ~ } の
カンマ「,」を書き忘れているとか。

────────────────
$.ajax({
url: "header.html",
cache: false,
success: function(html){
document.write(html);
} //← ここに必要なカンマ「,」を忘れている?
beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=Shift_JIS");
}
});
────────────────

いまこっちで試してみたら、

────────────────
$.ajax({
url: "header.html",
cache: false,
success: function(html){
document.write(html);
}, //← ちゃんとカンマ「,」をつける
beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=Shift_JIS");
}
});
────────────────

のコードでふつうに文字化けせずに読み込めたけど。

というか、
ふつうに Ajax で読み込んだとき文字化けする原因は、
Javascript では Unicode 文字列しか扱えないからなんで、
HTML ファイルの文字コードを utf-8 にすれば、
わざわざ overrideMimeType() しなくても
文字化けなんてしないんだけどね。

SJIS エンコードの csv とかを読込んでどうこうするなら仕方ないけど、
HTML や JS ファイルは utf-8 形式に統一したほうがいいと思う。

dr_********さん

2019/4/1923:07:46

共通部分とかフレームワークを使えば1発ですが

もっと簡単にやりたいならssi
node.jsのconnect-ssiを使えば超簡単

もっともフレームワークが使える人はnuxtとか使えば良いと思いますが

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる