スタートページ＞ Javascript＞ Prototype

子ファイルでの相対指定等の問題

head部に次の設定があります。
　　<script type="text/javascript" 　　　　src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"$gt;
</script>

読み込まれる外部ファイル（called/called2.html）を子ファイル、読み込むファイル（このページ）を親ファイルといいます。
子ファイルを独立して開き、それと次の表示結果を比較してください。

なお、各種の外部読込方法での結果一覧は「外部ファイル表示での問題」にあります。

例１：Ajax.Updaterによる全体表示

▼▼▼▼▼ ここから ▼▼▼▼▼

▲▲▲▲▲ ここまで ▲▲▲▲▲

以下は親ファイルに記述した文です。クリックの前後での変化に注意してください

Ｋ：<p>子ファイルのhead部で設定した<span class="iroGreen">green</span>です</p>

Ｌ：<p>子ファイルの外部ＪＳで指定した<span class="iroBlue">blue</span>（）</p>

Ｍ：<p>子ファイルのインラインでの関数<button onClick="インライン関数()"> </button>です。</p>

Ｎ：<p>子ファイルのhead部の関数<button onClick="子ファイルｈｅａｄ部関数()"> </button>です。</p>

Ｏ：<p>子ファイルの外部ＪＳの関数<button onClick="子ファイル外部ＪＳ関数()"> </button>です。</p>

▲▲▲▲▲ 確認データここまで ▲▲▲▲▲

<script type="text/javascript">
    function 例１(表示場所,子ファイル名) {
        new Ajax.Updater(         // Ａ
            表示場所,             // Ｂ
            子ファイル名,
            { method: "get" }     // Ｃ
        );
    }
</script>

<input type="button" value="例１実行"
    onclick='例１("例１表示場所", "called/called2.html")'>
</input>
<div id="例１表示場所"></div>

例２：Ajax.Requestでの全体表示

▼▼▼▼▼ ここから ▼▼▼▼▼

▲▲▲▲▲ ここまで ▲▲▲▲▲

以下は親ファイルに記述した文です。クリックの前後での変化に注意してください

Ｋ：<p>子ファイルのhead部で設定した<span class="iroGreen">green</span>です</p>

Ｌ：<p>子ファイルの外部ＪＳで指定した<span class="iroBlue">blue</span>（）</p>

Ｍ：<p>子ファイルのインラインでの関数<button onClick="インライン関数()"> </button>です。</p>

Ｎ：<p>子ファイルのhead部の関数<button onClick="子ファイルｈｅａｄ部関数()"> </button>です。</p>

Ｏ：<p>子ファイルの外部ＪＳの関数<button onClick="子ファイル外部ＪＳ関数()"> </button>です。</p>

▲▲▲▲▲ 確認データここまで ▲▲▲▲▲

<script type="text/javascript">
    function 例２(表示場所, 子ファイル名) {
        new Ajax.Request(                          // Ｄ
            子ファイル名,
            {
                method: "get", 
                onSuccess: function(読込情報) {     // Ｅ
                               例２読込後処理(表示場所, 読込情報.responseText);
                           }                        // Ｆ┘
            }
        );
    }

    function 例２読込後処理(表示場所, 読込文) {     // Ｇ
        $(表示場所).innerHTML = 読込文;             // Ｈ
    }
</script>

<input type="button" value="例２実行"
    onclick='例２("例２表示場所", "called/called2.html")'></input>
<div id="例２表示場所"></div>

例３：Ajax.RequestでのBody部だけの表示

Ajax.Requestでいったん全文を読込み、<body>～</body>の部分を取り出して表示します（子ファイルにHead部がなかったことになります）。

▼▼▼▼▼ ここから ▼▼▼▼▼

▲▲▲▲▲ ここまで ▲▲▲▲▲

以下は親ファイルに記述した文です。クリックの前後での変化に注意してください

Ｋ：<p>子ファイルのhead部で設定した<span class="iroGreen">green</span>です</p>

Ｌ：<p>子ファイルの外部ＪＳで指定した<span class="iroBlue">blue</span>（）</p>

Ｍ：<p>子ファイルのインラインでの関数<button onClick="インライン関数()"> </button>です。</p>

Ｎ：<p>子ファイルのhead部の関数<button onClick="子ファイルｈｅａｄ部関数()"> </button>です。</p>

Ｏ：<p>子ファイルの外部ＪＳの関数<button onClick="子ファイル外部ＪＳ関数()"> </button>です。</p>

▲▲▲▲▲ 確認データここまで ▲▲▲▲▲

<script type="text/javascript">
    function 例３(表示場所, 子ファイル名) {
        new Ajax.Request(
            子ファイル名,
            {
                method: "get", 
                onSuccess: function(読込情報) {
                               例３読込後処理(表示場所, 読込情報.responseText);
                           }
            }
        );
    }

    function 例３読込後処理(表示場所, 読込文) {
        読込文 = 読込文.replace(/[\r\n]/g, "");                 // Ｉ
        var 取出文 = 読込文.match(/<body>(.*?)<\/body>/i)[1];   // Ｊ
        $(表示場所).innerHTML = 取出文;
    }
</script>

<input type="button" value="例３実行"
    onclick='例３("例３表示場所", "called/called2.html")'></input>
<div id="例３表示場所"></div>

結果の検討

基本的に、親ファイルの指定個所に子ファイルをそのまま記述したことになります。
それは、Ajax.Updater、Ajax.Requestともに同じであり、全文表示のとき、両者の結果は全く同じです。

相対指定

スタイル

スクリプト

親ファイルとの関連

親ファイルと子ファイルで同じ名称の設定がある場合、どちらが優先するかが問題になります。ここでは、親ファイルのHead部に、スタイル iro.Green {color: orange}とスクリプト「子ファイルｈｅａｄ部関数」があります。