5509

JSファイルを含むページをAjaxロードしたときにJSを実行しないさせないしたくない

この前ちょっと聞かれたので、メモっときます。

AjaxでJS含んだページをそのままロードするとDOMに追加した時点で実行しよるんで、それを回避するためのやつです。Autopagerizeを参考にしたと思います。

ついでに取得したHTMLの走査方法ですが、そのまま$(html)とかにすると、一番上のwrapperとかそういうdivだったりする要素が取得できないので、一旦divをかませておきます。

Ajax部分のソースコード

$.ajax({
  url: "hoge.html",
  type: "GET",
  success: function(html) {
    // 文字列で取得したデータを整理する
    html = html.replace(/]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, "");
    var _div = $("
" + html + "
");     // 取得したHTMLの走査は_div.find("a")のようにする     // hogehoge   } });

コピペ用

html = html.replace(/]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, "");

要素のブラウザ上での位置を9ブロックの中から数値で返す m5GetElementPos

よくわからんと思いますけど、サンプルを見ればなんとなく伝わるような。。
指定した要素のブラウザがその時表示している位置を以下のテーブルの数値で返します。

┏━┳━┳━┓
┃0┃1┃2┃
┣━╋━╋━┫
┃3┃4┃5┃
┣━╋━╋━┫
┃6┃7┃8┃
┗━┻━┻━┛

m5GetElementPosのサンプル

返す数値は、実際returnで返ってくるわけじゃないんです。指定した要素にjQuery.dataで”ElementPos”というプロパティに書きこんでます。

ダウンロード

ダウンロードはgithubからどぞー

使い方とかをざっくりと

こんな感じで取れます。

$(target)
  .m5GetElementPos()
  .click(function() {
    alert($.data($(this), "ElementPos"));
    return false;
  });

または、コールバックでも使えます。

$(target).click(function() {
  $(this).m5GetElementPos({
    returnNumber: false,
    callback: function() {
      alert($.data(this, "ElementPos"));
    }
  });
  return false;
});

コールバック関数ではcallback.callしているので、thisはm5GetElementPosを実行した要素になります。

オプション

returnNumber 数値で返すか、文字で返すか。デフォルトは数値でtrue
returnCancel falseを指定するとthisを返さないので、メソッドチェーンができなくなります
callback コールバック関数

そんな感じで

バグとかあれば教えてください

大友克洋風のイラストを描いてもらった

僕はマンガがめっちゃ好きなわけなんですけど、イラストレーターの友だちと大友克洋ネタで盛り上がって、大友風の似顔絵描いてって言ったら本当に描いてくれたっていう。

できたの見て超興奮したっすよ。まだ興奮してるけど。。

背景で力尽きたらしくw白かったのでなんかそれっぽい背景と影足してiPhone壁紙サイズにしました。気にしなければ超かっこいい壁紙として使えるです。(ただしおれ)

iPhoneの壁紙に最適・・・!

それにしてもかっこいいわー・・・(イラストが)

CSS3アニメーションのおさらいとローディングアイコン

「CSS3でつくるローディングアイコン」っていうのを何も考えずに作ったんですけど、同じこと考える人なんかたくさんいるので、1年くらい前から色々存在してました・・・でもせっかくつくったので、もうありますけど、公開しておきます。

くるくるぼいんぼいん

あ、せっかくなのでCSS3アニメーションをおさらいしましょう!(今おもいついたから強引につかったとこだけ)

Read more

Author

nori
nori
- UI Engineer
Location
- ,