お知らせ

Movable Type 5.1 プロの現場の仕事術2011年6月30日

Movable Type 5.1 プロの現場の仕事術」が発売されました。
Movable Type 5.1の基本から、スマートフォン用サイトの作成、管理画面のカスタマイズなど、まさにプロの方のために書かれたMovable Type 5.1の解説書です。
Movable Typeでサイト制作をされている皆様はぜひお買い求めください。

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

Ajaxでファイルを組み込むプラグイン(その2)

| コメント(4) | トラックバック(0)

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の場合、動作しないこともありえます。

Facebook連携

当記事について「いいね」や「送信」を行っていただけると幸いです。


この記事についてウォールに投稿

トラックバック(0)

トラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/1249.

コメント(スレッド2件,コメント4件)

コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。

No.1 aiko_m : 参考になりました

ソース自体は長めのものではないので、条件をクリアするのは容易いのですが…document.write ありきのJavaScriptですので、ちょっと他の方法で表示出来ないか研究してみます。有難うございました。

No.2 footbrain : <MTAjaxIncludeJS>を外すと表示できなくなります。

お世話になってます。

>prototype.jsをすでに組み込んでいるのであれば、<MTAjaxIncludeJS>タグは不要です。

prototype.jsをすでに組み込んでいますが、<MTAjaxIncludeJS>を外すと表示できなくなります。

JavaScriptを使用しています。

どうしてでしょう?

No.3  : Re:<MTAjaxIncludeJS>を外すと表示できなくなります。

>footbrainさん
こんにちは。

コメントが間違っていました。申し訳ありません。
prototype.jsをすでに組み込んでいる場合は、MTAjaxIncludeJSタグの代わりに、以下のようなscriptタグを入れてください。

<script type="text/javascript" src="http://MTのインストール先/mt-static/plugins/AjaxInclude/js/ajax_include.js" charset="utf-8"></script>

No.4 footbrain : Re:<MTAjaxIncludeJS>を外すと表示できなくなります。

ありがとうございます。

一日がかりでようやく動かせるようになりました。

コメントする


Facebookでコメント

試験的にFacebookのコメントフォームを設置しました。