jQueryで append すると、追加したDOM中のscript タグが実行されます。
js>>
$('#target').append(what);
<<--
script タグを実行せずに append したい場合、あらかじめscript タグを取り除いておけば ok
js>>
what.find('script').remove();
$('#target').append(what);
<<--
Rails 2.0 以降から導入されたCSRF対策のAuthenticityTokenですが、
JavaScriptからこれを取得する方法のメモ。
js>>
$$('input[name="authenticity_token"]')[0].value
<<--
Ajax.Request等で呼び出す場合のお供に。
急に必要になったので作りました。
js>>
javascript:void(alert(document.getElementById('wys_frame').contentDocument.body.innerHTML.replace(/<.*?>|\s+/g, '').length))
<<--
自分が使えれば十分だったのでFirefoxのみ動作確認。
こういうとき、FlashではないAjaxアプリの便利さを実感しますね。
追記
やっぱり毎回Bookmarkletを起動するのが面倒になったので、
document.titleに2秒間隔で文字数を表示するバージョンを作りました。
js>>
javascript:void(clearInterval(window.gdocs_counter),window.gdocs_counter = setInterval(function(){var s=document.getElementById('wys_frame').contentDocument.body.innerHTML.replace(/<.?>|\s+/g, '');document.title = document.title.replace(/\s([.*?])?$/, [' [', s.length, ' chars]'].join(''));}, 2000))
<<--
なんだかA要素の直後の空白が無くなってしまいますね。
Windows用Safariのバグかと思ったら、Macでも同じ挙動でした。
とりあえず、
以下のように無理やりA要素の後にテキストノードを詰め込むことで対処。
js>>
var spacer = document.createTextNode(' ');
element.parentNode.insertBefore(spacer, element.nextSibling);
<<--
ちょっと必要になったので、
タグや空白を無視して、ある文字列の中から、
指定した文字列がマッチする範囲を計算するJavaScript
を書いてみました。
js>>
/* (C) Genki Takiuchi. New BSD License */
var findSelection = function(html, sel){
var chars = html.split(''), sels = sel.split('');
var start = 0, end = 0, step = 0, tag = false;
var cur = function(){return chars[end]};
var parse = function(){
switch(cur()){
case '>': if(tag) tag = false; return go();
case '<': if(!tag) tag = true; return go();
case '\n': return go();
case ' ': return go();
case '\t': return go();
default: return tag ? in_tag() : out_tag();
}
};
var go = function(){return(chars[end++] ? parse:reject)()};
var in_tag = function(){return go()};
var out_tag = function(){
return(cur() == go_sel() ? match:not_match)()
};
var not_match = function(){step = 0; return go()};
var match = function(){
if(step == 1) start = end;
return(sels[step] ? go:accept)()
};
var accept = function(){return [start, end + 1]}
var reject = function(){return [0, 0]};
var go_sel = function(){
var s = sels[step++];
return white_space(s) ? go_sel() : s
};
var white_space = function(c){
return c && c.match(/[\s\n]/)
};
return parse();
};
<<js
使い方は、こんな感じ。
js>>
findSelection('hello, world!', 'llo, world')
[2, 15]
<<js
選択範囲を取得して、選択している領域をRangeを求めるために作りました。selに指定した文字列にマッチする箇所が複数ある場合は、
最初にマッチした場所のRangeを返します。
jRails
プラグインは、RailsアプリケーションのデフォルトJavaScriptライブラリである
prototype.js
+
script.aculo.us
の環境から、
jQuery
を使うようにするためのRailsプラグインです。
プラグインをインストールする方法は、通常のRailsプラグインと同様です。
sh>>
% ./script/plugin install http://ennerchi.googlecode.com/svn/trunk/plugins/jrails
<<sh
インストールすると、jQuery関係のJavaScriptファイル郡がpublic/javascripts以下にコピーされます。
あとは、jRailsプラグインがRailsのJavaScriptヘルパーをjQuery対応に
してくれるので、そのままRailsアプリケーションを開発することができます。
当然ながら、prototype.jsやScript.aculo.us固有の関数は
利用できないので、既存のRailsアプリケーションをjQuery対応にする場合は、
そのあたりに注意が必要です。
See Also
In prototype.js, Event.observe method is very useful.
But it is a bit inconvenient if you want to handle events only once such as an initialization.
I have often encountered such situation, so I wrote a small utility function being as follows.
js>>
Event.observeOnce = function(element, event, observer){
var handler = function(){
Event.stopObserving(element, event, handler);
return observer.apply(null, $A(arguments));
};
Event.observe(element, event, handler);
};
<<--
The usage is same to Event.observe.
js>>
Event.observeOnce(document, 'dom:loaded', function(){
/* some code goes here */
});
<<--
It may be useful if you copy this into public/javascripts/application.js for Rails applications.
prototype.jsのEvent.observeは非常に便利なのですが、
初期化処理など、一度だけイベントの処理したい場合にはちょっと不便です。
度々そのような処理を行う機会があったので、以下のような
一度だけイベントをハンドルする関数を作ってみました。
js>>
Event.observeOnce = function(element, event, observer){
var handler = function(){
Event.stopObserving(element, event, handler);
return observer.apply(null, $A(arguments));
};
Event.observe(element, event, handler);
};
<<--
使い方は、通常のEvent.observeと同様です。
js>>
Event.observeOnce(document, 'dom:loaded', function(){
/* some code goes here */
});
<<--
Railsアプリケーションであれば、public/javascripts/application.js
あたりに置いておくと便利かもしれません。
少し前になりますが、このブログでHatenaStarを使えるようにしました。
記事の右下の署名のところに表示されています。
このブログシステムでは、デフォルトの挙動だと、タイトルの右側に出てしまうので、以下のようなカスタムローダを使っています。
js>>
document.observe('dom:loaded', function(){
Hatena.Star.EntryLoader.loadEntries = function(){
return #{entries.to_json}.map(function(entry){
var star = $(['article_star_', entry[2]].join(''));
return {uri: entry[0], title: entry[1],
star_container: star, comment_container: star};
});
};
});
<<--
loadEntriesはElementオブジェクト含む配列のリストを返す
必要があるのですが、これはPrototype.jsの$()関数のように、
ElementでもElement IDの文字列でも両方
受け取れるようにしたら、もっと便利かも。
SafariかFirefoxで閲覧することが多いので気がつくのが遅れましたが、
この記事
をPostして以降、IE6でレンダリングが乱れる状態になっていたようです。
原因は、はっきりとはわかっていないのですが、
埋め込まれていたSWF（現在はリンクだけになっています）の初期化と、
JavaScriptの実行が干渉していた模様。
JavaScriptの実行とFlash Playerの実行の順序やタイミングについては、
ブラウザごとに微妙に違ったりしているようで、なかなか良くわかりにくい
ところですね。
何も考えずに
SWFObject
などを使って、JavaScript側から明示的にタイミングを指定して
SWFを初期化するのが良いのかも。
This is a memo of an idea that I'd wanted to do for about a year since my starting to write some codes for a comet server.
By using Comet, JavaScript tests by various browsers can be automated. It's sure to be able to do even by any browsers to say nothing of the Firefox with MozRepl.
I've said in each place about this, but it has been hard to make a time to touch it, because too many exciting ideas struggled in my brain to make my hands type them out.
I wrote this entry with a hope that it might be going to be done by someone else.
前からやりたかったアイディアのメモ。
Cometを使えばMozReplみたいなのをFirefox以外のブラウザでもできるはず。
それを使って各種ブラウザでのテストを自動化する。
結構各所で言ってるんだけど、なかなか手がつけられない。
最近手がつけられないアイディアが多くなってきたので、
誰かが作ってくれるかもしれない希望を込めて書いておきます。
自サイト上でユーザにJavaScriptを（限定的に）許可したいやはり動機に関してはこのへんですね。 [**[Facebook] FBJSでFacebookアプリ内でJavaScriptを利用**](http://kawa.at.webry.info/200708/article_3.html) >Facebook では、FBML という HTML サブセットの独自言語でサードパーティの開発者が誰でもアプリケーションを作成できる。FBML では当初は
例えば、はてなダイアリー等でユーザがブログパーツを張れるよう許可するとか。但し
- document.cookie等、危険な機能は操作不能にする
- あくまでサイト上でJSを許可する（iframeは不可）
