「WordPressで学ぶPHP(4)通信編」を発売しました。
本書は、「WordPressで学ぶPHP(1)変数・制御構造編」「WordPressで学ぶPHP(2)データ構造編」「WordPressで学ぶPHP(3)関数編」の続編にあたり、Webブラウザとサーバー(PHP)との通信と、PHPから他のサーバーに通信することについて解説します。
Ajaxでファイルを組み込むプラグイン(その2)
Ajaxでファイルを読み込むプラグインでは、読み込むファイルにscriptタグが含まれていると、そのJavaScriptは動作しません。
ただし、一部のJavaScriptは、動作させることができる場合があります。
その方法を解説します。
1.動作させることができるJavaScript
動作させることができるJavaScriptは、以下のような条件を満たしている必要があります。
- JavaScriptのコードがHTMLに直接に書かれている(src属性でJavaScriptを組み込まない)
- document.writeメソッドを使っていない
2.HTMLからJavaScriptを削除
まず、組み込みたいHTMLから、JavaScript(<script・・・>~</script>)の部分を切り取ります。
切り取ったJavaScriptは、メモ帳等に貼り付けておきます。
3.MTAjaxIncludeタグの書き換え
次に、MTAjaxIncludeタグを、以下のように書き換えます。
「変数名」には、英単語で適当な変数名をつけてください(例:「js1」など)。
また、「実行したいJavaScriptのコード」には、scriptタグの内側のJavaScriptのみを記述します(scriptタグは入れません)。
<MTSetVarBlock name="変数名"> 実行したいJavaScriptのコード </MTSetVarBlock> <MTAjaxInclude id="ID" js="$変数名">読み込むファイル名</MTAjaxInclude>
例えば、ファイルを読み込んで、その内容を「foo」というdiv要素に流し込むとします。
また、その内容(innerHTML)をalertでポップアップ表示したいとします。
この場合、以下のようにタグを組みます。
<MTSetVarBlock name="js1"> var fooObj = document.getElementById('foo'); alert(fooObj.innerHTML); </MTSetVarBlock> <MTAjaxInclude id="foo" js="$js1">読み込むファイル名</MTAjaxInclude>
4.注意事項
JavaScriptを動作させる手順は、おおむね上記のようになります。
しかし、すべてのJavaScriptを動作させられるという保障はありません。
複雑なJavaScriptの場合、動作しないこともありえます。
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください
aiko_m
ソース自体は長めのものではないので、条件をクリアするのは容易いのですが…document.write ありきのJavaScriptですので、ちょっと他の方法で表示出来ないか研究してみます。有難うございました。
footbrain
お世話になってます。
>prototype.jsをすでに組み込んでいるのであれば、<MTAjaxIncludeJS>タグは不要です。
prototype.jsをすでに組み込んでいますが、<MTAjaxIncludeJS>を外すと表示できなくなります。
JavaScriptを使用しています。
どうしてでしょう?
壱からfootbrainへの返信
>footbrainさん
こんにちは。
コメントが間違っていました。申し訳ありません。
prototype.jsをすでに組み込んでいる場合は、MTAjaxIncludeJSタグの代わりに、以下のようなscriptタグを入れてください。
<script type="text/javascript" src="http://MTのインストール先/mt-static/plugins/AjaxInclude/js/ajax_include.js" charset="utf-8"></script>
footbrainからfootbrainへの返信
ありがとうございます。
一日がかりでようやく動かせるようになりました。