 |
ヘッダ内にソースを貼り付ける |
ビルダーの 「編集」 → 「ページの属性」 とクリックし 「その他」のタブをクリックします。
「その他のHTMLタグ」
と記載された入力枠がありますので、そこへ以下の行を追加します。
追加したら 「OK」 ボタンをクリックして下さい。
ボタンが不用の場合はページ読み込み時に表示する場合をご参照下さい。
備考
直接HTMLソースに追記する場合は <head> 〜
</head> の間に追加します。
また、既にページ内でjQueryを使用している場合、最上部と同じ行があると思いますので、
この行は省略して下さい。
ボタンのクリックで表示するのではなく、ページ表示後にそのまま表示したい場合の例です。
例えばお知らせ欄や共通のメニューなど、複数の箇所で表示する必要があるファイルを
この方法で読み込むと、単一ファイルの修正で済みます。
ビルダーの 「編集」 → 「ページの属性」 とクリックし 「その他」のタブをクリックします。
「その他のHTMLタグ」
と記載された入力枠がありますので、そこへ以下の行を追加します。
OKを押して閉じる前に、
ソース内の以下の2箇所を修正します。
#sample1 の部分を表示先のDIVに付けるidに修正します。
とりあえず動作確認を行なう場合は sample1 のままで結構です。
ajaxsample1.txt の部分を実際に読み込むファイルパスに修正します。
追加したら 「OK」 ボタンをクリックして下さい。
備考
直接HTMLソースに追記する場合は <head> 〜
</head> の間に追加します。
また、既にページ内でjQueryを使用している場合、最上部と同じ行があると思いますので、
この行は省略して下さい。
最後にレイアウト枠（div）を追加します。
idの sample1 の部分は先ほど貼り付けたソースに合わせて修正します。
sample1のまま貼り付けた場合は以下のままで結構です。
ビルダーから操作する場合、配置したい箇所をクリックし、カーソルが希望の位置に
ある事を確認します。
そのまま「HTMLソース」タブをクリックし、メニューの「編集(E)」 → 「貼り付け(P)」とし、
ページ編集画面に戻ります。
上記の操作で読み込まれる状態になっていますので、
プレビューに切り替えて確認してみます。
<head>〜</head>内に貼り付けたJavaScriptのコードが、
<script type="text/javascript" src="jquery.js"></script>
の行より
下にある事を確認して下さい。
読み込む対象のファイルが正しい位置にあるか確認して下さい。
上記の例ではhtmlファイルと同じディレクトリにある場合です。
例えばhtmlファイルがあるディレクトリ内に test というディレクトリがあり、
そこに対象のファイルがある場合は、
$("#sample1").load("test/ajaxsample1.txt");
のように指定します。
2箇所で指定したdivのidが一致しているか確認して下さい。
上記の例の場合 sample1 の文字列です。
JavaScriptを使用しますので、非対応のブラウザや設定でJavaScriptが無効に
なっている場合などは何も表示されません。
スクリプトが実行できない環境の場合のみ表示されるnoscriptタグがありますので、
これを利用して別途直接リンクしておくと親切です。
ビルダーから操作する場合は、
「挿入 」 → 「その他」 → 「HTMLタグ」 とクリックし、
一覧から 「NOSCRIPT」 を選択して「挿入ボタン」をクリックします。
灰色の枠が表示されると思いますので、そこにスクリプトが無効の場合のメッセージや
リンクなどを配置しておきます。
noscriptタグの確認
確認するにはブラウザの設定でスクリプトの実行を制限します。
- Internet Explorerの場合、
「ツール」 → 「インターネットオプション」 から 「セキュリティ」タブを選択します。
このゾーンのセキュリティレベルの項目にスライダがありますので、これを「高」にし、
「OK」ボタンをクリックします。
- ページの更新ボタンを押すか、キーボードの「F5キー」を押してページを更新します。
- noscriptタグを入れた箇所を見て、どのように表示されているか確認します。
- スクリプトの制限設定を元に戻します。
手順 1. の設定を表示し、スライダを「中高」に戻してOKを押します。
なお、Internet Explorerの設定は、ホームページビルダーのプレビューにも反映されます。
|
