NinjaIframe

NinjaIframe

隠し iframe 機能を提供します。

new NinjaIframe()

http://msdn.microsoft.com/ja-jp/library/ie/hh180174%28v=vs.85%29.aspx 孤立するとウィンドウ オブジェクトのプロパティが消去される http://qiita.com/sou/items/3380d4fa9b08b27bb387 モバイルブラウザでの iframe の挙動(Mobile Safari, Chrome for Android)

Members

private _anime :object

アニメーション用オブジェクト。

private _attrs :object

属性。

private _attrText :object

属性を文字列にしたもの。 color="red" size="8"

private _className :string

クラス名。複数のクラスが設定されている場合、スペース区切り。

_contentHTML :string

iframe に write する html 文字時列

private _css :object

スタイル。

private _cssText :string

cssText

private _flags :number

Node の状態を表すフラグ。

private _fontSize :number

最後に計測したフォントサイズを保持している。ツリーが変更されると削除される。

private _gpuParent :Node

GPU レイヤーに転送されている場合、その一番親となっている Node。未実装。

private _id :string

id

private _iwin :window

iframe の contentWindow

private _listeners :__Listeners__

イベントリスナをイベント名文字列や数値(5以上、フレームワーク内で定義)をキーとするArrayで記憶します。
Arrayには、{cbKind:種類,context:コンテキスト(thisObject),func:コールバック関数,supplement:サプリメントする引数の配列} というハッシュ、または関数が蓄えられています。

private _name :string

iframe の name

private _newAttrs :object

まだコミットされていない属性。

private _rawObject :Object

_rawObject には HTMLElement, window, document, XHR といったイベントターゲットオブジェクトを設定します。 _rawObject が設定されていると listen(), unlisten() 時に addEventListener(DOM Level2) や detachEvent(ie5~8), on~(DOM0) 等を操作します。 _rawObject は最初の listen() 前に設定しておかないと addEventListener 等が意図したように行われません。 X.Node では非同期に HTMLElement を生成していますが、要素生成以前に listen, unlisten を呼び出すことができます。これは適宜に X_EventDispatcher_toggleAllEvents を呼んで解決しているためです。

private _rawType :number

EventDispatcher がラップしている EventTarget オブジェクトのタイプです。
X_EventDispatcher_actualAddEvent で使用されます。
OTHER:0(node,window,document,Image,Audio), XHR:1, Silverlight:2

private _ready :string

iframe への html 文字列の write が完了した

private _tag :string

タグ名。テキストノードの場合は空文字列。

private _text :string

テキストコンテンツ。テキストノードで使用。

private _uid :number

要素に振られるユニークID

private _xnodes :Array

子 Node リスト

constant length :number

NodeList と動作を一致させるためのプロパティ。常に 1。

parent :Node

親 Node。

Methods

addClass(className) → {Node}

className の追加。

Parameters:
Name Type Description
className string スペース区切りで複数のクラスを追加できる。
Returns:
Node 自身。
Example
 node.addClass( 'myClass myClass_new' );

animate(obj) → {Node}

GPU サポートの効いたアニメーションの設定 ぺったんRフレームワークのアニメーションメソッド

Parameters:
Name Type Description
obj object
Returns:
Node メソッドチェーン
Example
xnode.animate{
	 from       : {
	    x       : num,
     y       : num,
     opacity : 0.0, //~1.0
     rotate  : deg,
     skew    : deg,
     skewX   : deg,
     skewY   : deg,
     scale   : num,
     scaleX  : num,
     scaleY  : num,
     scrollX : num,
     scrollY : num
   },
  to          : {}, // from と同じ
  duration    : ms,
  lazyRelease : ms,
  easing      : 'quadratic', // function, 'circular', 'back', 'bounce', 'elastic'
  fallback    : bitFlag // 16:DXTransform, 8:css-p, 4:zoom(s) > 2:fontSize(s) > 1:width&height(vh,s)
  ** tree にいなくてもアニメーションを行いイベントを発生
  ** SVG transfrom
  fallbackWidth, fallbackHeight, transformOrigin( 0.5, 0.5 )
}

append(v) → {Node}

ノードを子配列の最後に追加する。文字列が渡された場合、HTMLパーサーによって Node ツリーを作成して追加する。HtmlElement, TextNode の場合は内部使用専用。

Parameters:
Name Type Argument Description
v Node | string | HTMLElement | TextNode optional  HTMLElement と TextNode は内部のみ。
Returns:
Node 自身。チェインメソッド
Example
 //
myNode.append( node );
myNode.append( node, '<span>Hello,</span>', 'world.' );

appendAt(index, v) → {Node}

ノードを挿入位置に追加する。

Parameters:
Name Type Argument Description
index number 挿入位置 0以上
v Node | string | HTMLElement | TextNode optional  HTMLElement と TextNode は内部のみ。
Returns:
Node 自身。チェインメソッド
Example
 myNode.appendAt( 1, node );

appendTo(parent, opt_index) → {Node}

ノードを親に追加する。戻り値は子ノードなので、続けて操作が出来る。

Parameters:
Name Type Argument Default Description
parent Node | string | HTMLElement optional  HTMLElement は内部のみ。
opt_index number optional  -1 挿入位置。省略した場合は最後に追加する。
Returns:
Node 自身。チェインメソッド
Example
 childNode.appendTo( parentNode, 1 );

asyncDispatch(delay, e) → {number}

delay(ミリ秒)後にイベントを dispatch する。戻り値は uid = X.Timer.once() のタイマーID(数値)。X.Timer.remove(uid) でタイマーを解除して dispatch を中止できる。 kill() 時には内部でまだ呼ばれていないタイマーの X.Timer.remove() が行われる。インスタンスが破棄された後にタイマーが呼ばれることがないので神経質にならなくても安全に使える。

Parameters:
Name Type Description
delay number | eventHash | string ms 省略した場合は 0 として扱う asyncDispatch( 'myevent' ) -> asyncDispatch( 0, 'myevent' )
e eventHash | string | number イベントを表す数値、文字列、{ type : XXX, ... } なオブジェクト
Returns:
number X.Timer.add() の戻り値
Example
 this[ 'asyncDispatch' ]( 'myevent' );
// どちらのコードも同じ動作をする。
this.asyncDispatch( 0, 'myevent' );

attr(nameOrObj, value=) → {Node|string|number}

属性の getter と setter。onclick等はできないので listen, listenOnce を使うこと。http://nanto.asablo.jp/blog/2005/10/29/123294

Parameters:
Name Type Argument Description
nameOrObj string | object optional  属性名、または追加する属性のハッシュ
value= string | number optional  属性の値
Returns:
Node | string | number getter の場合は値を、setter の場合は自身を返す。(メソッドチェーン)
Example
 // getter
node.attr( 'tagName' ) === 'DIV';
// setter - 1
node.attr( { src : url, width : 100, height : 100 } );
// setter - 2
node.attr( 'src', url );

call(name) → {*}

HTML要素に対して name の関数を実行しその戻り値を返す。関数に渡す引数も任意に設定できる。

Parameters:
Name Type Argument Description
name string optional  要素の関数名
Returns:
*
Example
 node.call( 'focus' );

className() → {string|Node}

className の取得と設定。

Returns:
string | Node getter の場合 class 文字列、setter の場合自身。
Example
 // getter
className = node.className();
// setter
node.className( 'myClass myClass_new' );

clientHeight() → {number}

要素のコンテンツ領域の高さ。elm.clientHeight

Returns:
number
Example
 node.clientHeight();

clientWidth() → {number}

要素のコンテンツ領域の幅。elm.clientWidth

Returns:
number
Example
 node.clientWidth();

clone(opt_clone_children) → {Node}

Node のクローンを作成し返す。id もクローンされる点に注意。イベントリスナはクローンされない。 http://d.hatena.ne.jp/think49/20110724/1311472811 http://d.hatena.ne.jp/uupaa/20100508/1273299874

Parameters:
Name Type Argument Description
opt_clone_children boolean optional  子要素のクローンを行うか?
Returns:

Constructor(opt_rawObject)

X.EventDispatcher のコンストラクタの実体。
イベントターゲットをラップする場合、通常は new 時に渡します。
アプリケーション独自のイベントをやり取りしたいだけ、という場合イベントターゲットは指定しません。

Parameters:
Name Type Argument Description
opt_rawObject object optional 

contains(v) → {boolean}

要素を子以下に持つか?調べる。

Parameters:
Name Type Argument Description
v Node | string | HTMLElement | TextNode optional  HTMLElement と TextNode は内部のみ。
Returns:
boolean
Example
 node.contains( testNode );

create(tag, opt_attrs=, opt_css=) → {Node}

タグ名等を指定して新規に子ノードを作成し、現在のノードに追加する。

Parameters:
Name Type Argument Description
tag string optional  タグ名
opt_attrs= object optional  属性
opt_css= object | string optional  css
Returns:
Node 新規作成されたノード
Example
 var child = parent.create( 'div' );

createAt(index, tag, opt_attrs=, opt_css=) → {Node}

挿入位置とタグ名等を指定して新規に子ノードを作成し、現在のノードに挿入する。

Parameters:
Name Type Argument Description
index number optional  挿入位置
tag string optional  タグ名
opt_attrs= object optional  属性
opt_css= object | string optional  css
Returns:
Node 新規作成されたノード
Example
 var child = parent.create( 2, 'div' );

createText(tag) → {Node}

テキストを指定して新規にテキストノードを作成し、現在のノードに挿入する。

Parameters:
Name Type Argument Description
tag string optional  テキスト
Returns:
Node 新規作成されたノード

createTextAt(index, tag) → {Node}

挿入位置とテキストを指定して新規に子ノードを作成し、現在のノードに挿入する。

Parameters:
Name Type Argument Description
index number optional  挿入位置
tag string optional  テキスト
Returns:
Node 新規作成されたノード

css(nameOrObj, value=) → {Node|string|number}

style の getter と setter。

Parameters:
Name Type Argument Description
nameOrObj string | object optional  style 名、または追加する style のハッシュ
value= string | number optional  style の値
Returns:
Node | string | number getter の場合は値を、setter の場合は自身を返す。(メソッドチェーン)
Example
 // getter
node.css( 'color' );
// setter - 1
node.css( { width : w + 'px', height : h + 'px' } );
// setter - 2
node.css( 'color', 0x666666 );

cssText(v) → {Node|string}

cssText の getter と setter。setter の場合 css と異なり全ての style が書き変わる。

Parameters:
Name Type Argument Description
v string optional  cssText 文字列名
Returns:
Node | string getter の場合は cssText 文字列を、setter の場合は自身を返す。(メソッドチェーン)
Example
 // getter
node.cssText();
// setter
node.cssText('color:red;width:20px');

dispatch(e) → {number}

登録されたイベントリスナを呼び出す。イベントリスナの返り値(数値)を OR したものを返す。イベントハッシュでなく、string|number を渡すと内部でイベントハッシュを作る。 dispatch のコールバック中で kill() が呼ばれた場合、実際の kill は、dispatch の終わりまで待機する。dispatch がネストする場合は全ての dispatch の完了で kill() する。__ClassBase__ も参照。 dispatch のコールバック中で listen() が呼ばれた場合、実際の listen は、dispatch の終わりまで待機する。dispatch がネストする場合は全ての dispatch の完了で listen() する。 dispatch のコールバック中で unlisten() が呼ばれた場合、即座に反映され削除されたイベントリスナーは呼ばれない。

Parameters:
Name Type Description
e eventHash | string | number
Returns:
number X.Callback で定義された数値(ビットフラグ)

empty() → {Node}

子要素を破棄する。子要素は kill() されます。

Returns:
Node 自身。チェインメソッド
Example
 node.empty();

find(セレクター文字列) → {Node|NodeList}

selector を使って Node, NodeList を取得する

Parameters:
Name Type Description
セレクター文字列 string
Returns:

firstChild() → {Node}

最初の子要素を取得する。

Returns:
Node 最初の子要素
Example
 child0 = parent.firstChild();

getChildAt(index) → {Node}

index の子要素を取得する。

Parameters:
Name Type Description
index number 取得する子ノードの位置。0~
Returns:
Node 子要素
Example
 child1 = parent.getChildAt(1);

getOrder() → {number}

要素の index 位置を取得する。

Returns:
number index -1 の場合、親を持たない。
Example
 index = node.getOrder();

hasClass(className) → {boolean}

className を持つか。

Parameters:
Name Type Description
className string スペース区切りで複数のクラスを削除できる。
Returns:
boolean
Example
 node.hasClass( 'myClass myClass_new' );

height() → {number}

要素の高さ。elm.offsetHeight

Returns:
number
Example
 node.height();

html(html=) → {string|Node}

innerHTML 取得・設定。outerHTML が欲しい場合は、xnode.call('outerHTML') とできる。

Parameters:
Name Type Argument Description
html= string optional  html文字列
Returns:
string | Node
Example
 node.html( '' );

instanceOf(klass) → {boolean}

インスタンスのクラスか?またはスーパークラスか?調べる。
instanceof 構文をサポートしない環境(IE5以下)を想定する場合、必ずこのメソッドを使用すること。
クラスのインスタンスか?だけ調べたい場合は this.constructor === klass が高速。

Parameters:
Name Type Description
klass __ClassBase__ クラス定義
Returns:
boolean

kill()

全ての動的メンバを削除して、インスタンスを破棄する。
インスタンスが X.EventDispatcher とそのサブクラスの場合、次の動作をする。

  1. X.Event.BEFORE_KILL_INSTANCE を発火する。戻り値のビットフラグに X_Callback.PREVENT_DEFAULT が立つ場合、破棄をキャンセルし X.Event.KILL_INSTANCE_CANCELED を発火する。この間に kill() が呼ばれても無視される。
  2. 破棄に進む場合は、X.Event.KILL_INSTANCE を発火する。
  3. dispatch 中は、インスタンスの全ての dispatch が終了するまで実際の破棄を待つ。
  4. 実際の破棄では、インスタンスのメンバの削除に加えて全てのイベントリスナを解除する。

lastChild() → {Node}

最後の子要素を取得する。

Returns:
Node 最後の子要素
Example
 lastChild = parent.lastChild();

listen() → {EventDispatcher}

イベントリスナを追加する。同一イベントに対して重複するリスナ(context, function, 引数 array が一致)の追加は無視される。 ユーザーが触ることは無いが、システム内部でロックフラグを立てたリスナは、立てられていないフラグとは区別される。 この仕組みによってシステムの登録したリスナを、システム外から不用意に削除されることを回避する。

Returns:
EventDispatcher チェインメソッド
Example
 // 'myEvent' に対して、 this コンテキストを指定して 、コールバック関数を渡す。
this[ 'listen' ]( 'myEvent', context, func );
// 'myEvent' に対して、 this コンテキストを指定して 、コールバック関数と追加の引数を渡す。
args = [ 'arg1', 'arg2', 3 ]; // unlisten( 'myEvent', context, func, args ) で使用するので Array も控えておく。
this[ 'listen' ]( 'myEvent', context, func, args );
// 'myEvent' に対して、 listener オブジェクトを渡す。listener は handleEvent という関数を持つオブジェクトのこと。
listener.handleEvent = function( e ){};
this[ 'listen' ]( 'myEvent', listener );
// 'myEvent' に対して、 listener オブジェクトと追加の引数を渡す。
listener.handleEvent = function( e, arg1, arg2, arg3 ){};
this[ 'listen' ]( 'myEvent', listener, [ arg1, arg2, arg3 ] );
// 'myEvent' に対して、 function を渡す。
this[ 'listen' ]( 'myEvent', onMyEvent );
// 'myEvent' に対して、 function と追加の引数を渡す。
this[ 'listen' ]( 'myEvent', onMyEvent, args );
// 次の二つは同じ動作です。 this コンテキストが与えられなかった場合、コールバックの this は発火元インスタンスになります。
this[ 'listen' ]( 'myEvent', this [, func [, args ] ] );
this[ 'listen' ]( 'myEvent' [, func [, args ] ] );
// 複数のイベントタイプを同時に登録。コールバックは同じ指定が使われる。
this[ 'listen' ]( [ 'open', 'close', 'ready' ], onUpdate );

listening(opt_type, opt_arg1, opt_arg2, opt_arg3) → {number|boolean}

イベントリスナの登録状況を真偽値で返す。戻り値が数値(index)の場合もあるが、これは内部のみで使用。

this.listening(); のように type を省略した場合、一つでも登録があれば true を返す。

this.listening( 'myevent' ); と type だけを与えた場合、その type に登録があれば true を返す。

type と イベントリスナの組み合わせが登録されているかを調べる場合は、listen 時の thisObject や args(Array) も一致させて渡す必要がある。

Parameters:
Name Type Description
opt_type string | number
opt_arg1 listener | function | Array | callbackHash
opt_arg2 function | Array
opt_arg3 Array
Returns:
number | boolean
Example
 
 this.listen( [ 'myevent', 'yourevent' ], this, onMyEvent, args = [ 1, 'a' ] );
 this.listening( 'myevent', this, onMyEvent, args ) === true;

listenOnce(type, opt_arg1=, opt_arg2=, opt_arg3=) → {EventDispatcher}

dispatch 時に自動で unlisten されるフラグを立てて listen する。

Parameters:
Name Type Argument Description
type string | number | Array.<string, number> 配列を指定した場合、複数のイベントタイプに対して同じコールバックを登録する。
opt_arg1= listener | function | Array optional 
opt_arg2= function | Array optional 
opt_arg3= Array optional  コールバック時の引数を配列に入れる。引数がひとつでも配列を使用する。省略した場合引数なし。unlisten() に使用するので、配列も適宜に保持しておくこと。
Returns:
EventDispatcher チェインメソッド

next(v) → {Node}

ノードの直後の要素を取得。または直後に挿入。挿入する要素が先にいる兄弟でも正しく動作する。

Parameters:
Name Type Argument Description
v Node | string | HTMLElement | TextNode optional  HTMLElement と TextNode は内部のみ。
Returns:
Node 自身。チェインメソッド
Example
 childNode.next( prevNode );

numChildren() → {number}

子要素の数を取得する。

Returns:
number 子要素の数。
Example
 n = parent.numChildren();

offset() → {object}

要素の文書内の位置。

Returns:
object { x: {number}, y : {number} }
Example
 node.offset();

prev() → {Node}

ノードの直前の要素を取得。または直前に挿入。挿入する要素が先にいる兄弟でも正しく動作する。

Parameters:
Name Type Argument Description
...v Node | string | HTMLElement | TextNode optional  HTMLElement と TextNode は内部のみ。
Returns:
Node 自身。チェインメソッド
Example
 childNode.prev( prevNode );

refresh(opt_contentHTML) → {NinjaIframe}

iframe 内をリフレッシュ、または内容を上書きする

Parameters:
Name Type Argument Description
opt_contentHTML string optional  html文字列
Returns:
NinjaIframe チェーンメソッド

remove() → {Node}

要素を親要素から抜く。jQuery の remove と異なり、インスタンスは破壊(kill)されず、再び別の親に挿入等できる

Returns:
Node 自身。チェインメソッド
Example
 node.remove();
parent.append( node ); 新しい親に追加できる

removeClass(className) → {Node}

className の削除。

Parameters:
Name Type Description
className string スペース区切りで複数のクラスを削除できる。
Returns:
Node 自身。
Example
 node.removeClass( 'myClass myClass_new' );

scrollHeight() → {number}

要素のスクロール領域の高さ。elm.scrollHeight

Returns:
number
Example
 node.scrollHeight();

scrollLeft() → {number}

要素のスクロール位置。elm.scrollLeft

Returns:
number
Example
 node.scrollLeft();

scrollTop() → {number}

要素のスクロール位置。elm.scrollTop

Returns:
number
Example
 node.scrollTop();

scrollWidth() → {number}

要素のスクロール領域の幅。elm.scrollWidth

Returns:
number
Example
 node.scrollWidth();

stop() → {Node}

アニメーションの停止。

Returns:
Node メソッドチェーン

Super(var_args) → {*}

関数は Constructor 内で使用します。クラス定義を辿ってスーパークラスのコンストラクタを呼び出します。
内部的には、呼び出したコンストラクタは配列に控え(X_Class_CALLING_SUPER)、呼び出したコンストラクタ内でさらに Super が呼ばれた場合、配列を元にさらにスーパーなコンストラクタを辿ります。

Parameters:
Name Type Argument Description
var_args ? repeatable  親コンストラクタを呼ぶ際に渡す任意の数の引数
Returns:
*
Example
 Constructor : function( arg1, arg2 ){
	this.Super( aeg1, arg2 );
}

superCall(myFunc, var_args) → {*}

myFunc について、スーパークラスで設定されている同名の関数を呼び出す。
低速な関数なので多用されるべきではありません!
第一引数に自身の(自身から参照できる)関数を指定します。内部では関数名を調べた上で prototype チェーンをゴリゴリ辿る、特別なことはしていません。
superCall と Super がネストする場合も現在のクラス階層を X_Class_SUPER_CALLER, X_Class_SUPER_STACKS を使って控えているので、意図した親関数が呼ばれます。
次の理由によって、関数名で辿ることは非推奨です。

  1. closur compiler でメソッド名が変更される
次の場合、意図した動作が得られません。
  1. 2つ以上の異なる名前で同じ関数がメンバーがいた場合
  2. サブクラスの prototype にスーパークラスと同じ関数をコピーしている
  3. 非関数でメンバーを上書きしている
  4. superCall 以外の手段で親関数を呼び、そのなかで superCall を呼んだ
通常の X.Class.create の書き方ではこのような状況は起きませんが、js はなんでもいろいろ出来てしまいますから…
参考:ES5なJavascriptでモダンなクラス的継承&スーパー呼び出し
original:Classical Inheritance in JavaScript

Parameters:
Name Type Argument Description
myFunc function | string オーバーライド済の自身の(自身から参照できる)関数。
var_args * repeatable  オーバーライド元関数に渡す任意の数の引数
Returns:
* オーバーライド元の関数を呼び出した戻り値。
Example
 return this.superCall( this.myFunc, param0, param1, ... );

swap(v) → {Node}

要素の入れ替え。自身は remove() される。

Parameters:
Name Type Argument Description
v Node | string | HTMLElement | TextNode optional  HTMLElement と TextNode は内部のみ。
Returns:
Node 自身。チェインメソッド
Example
 node.swap( newNode );

text(text=) → {string|Node}

textContent 取得・設定。null が来たら '', 数値等が来たら文字列化

Parameters:
Name Type Argument Description
text= string optional 
Returns:
string | Node
Example
 node.text( 'Hello, world!' );

toggleClass(className, opt_toggle=) → {Node}

className の更新。

Parameters:
Name Type Argument Description
className string スペース区切りで複数のクラスを削除できる。
opt_toggle= boolean optional  true はクラスの追加。false はクラスの削除。undefined はクラスのトグル。
Returns:
Node 自身。
Example
 node.toggleClass( 'myClass myClass_new', !!n );

unlisten() → {EventDispatcher}

イベントリスナの解除を行う。登録時と同じ引数を与える必要がある。kill() で自信に登録されたすべてのイベントが解除されるので、途中で解除されるイベント以外は kill() に任せてしまってよい。
他人に登録したイベントを解除せずに kill するのは NG。

Returns:

width() → {number}

要素の幅。elm.offsetWidth

Returns:
number
Example
 node.width();

x() → {number}

要素の親要素に対する位置。offsetLeft

Returns:
number
Example
 node.x();

y() → {number}

要素の親要素に対する位置。offsetTop

Returns:
number
Example
 node.y();