X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F05_util%2F01_XNinjaIframe.js;h=c0a77d1d435eff5f2789e7269df347a529e42433;hb=ef25747bebf1799d49f9bd0d64e339da9ea61d13;hp=e88cb34c12eb352a4bbbec3cd11b057fedf64f31;hpb=83a329e3210a40f383282389a48a33ea34ccfa1f;p=pettanr%2FclientJs.git diff --git a/0.6.x/js/05_util/01_XNinjaIframe.js b/0.6.x/js/05_util/01_XNinjaIframe.js index e88cb34..c0a77d1 100644 --- a/0.6.x/js/05_util/01_XNinjaIframe.js +++ b/0.6.x/js/05_util/01_XNinjaIframe.js @@ -1,29 +1,52 @@ -/* +/** * 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) + * + * @alias X.Util.NinjaIframe + * @class NinjaIframe 隠し iframe 機能を提供します。 + * @extends {Node} */ - -// TODO Node.inherits -X[ 'Util' ][ 'NinjaIframe' ] = X_EventDispatcher[ 'inherits' ]( +var X_NinjaIframe = X[ 'Util' ][ 'NinjaIframe' ] = Node[ 'inherits' ]( 'NinjaIframe', + + /** @lends NinjaIframe.prototype */ { - autoRefresh : 0, - - xnodeIframe : null, + /* autoRefresh : 0, */ + /** + * iframe の contentWindow + * @private + * @type {window} */ _iwin : null, + /** + * iframe に write する html 文字時列 + * @type {string} */ _contentHTML : '', + + /** + * iframe の name + * @private + * @type {string} */ _name : '', + + /** + * iframe への html 文字列の write が完了した + * @private + * @type {string} */ _ready : false, 'Constructor' : function( html ){ + // TODO src も設定可能に this._name = 'hidden-iframe-' + X_Timer_now(); // https://github.com/polygonplanet/Pot.js/blob/master/src/Worker.js - this.xnodeIframe = X_Node_body[ 'create' ]( - 'iframe', + this[ 'Super' ]( + 'IFRAME', { className : 'hidden-iframe', scrolling : 'no', @@ -35,64 +58,31 @@ X[ 'Util' ][ 'NinjaIframe' ] = X_EventDispatcher[ 'inherits' ]( } ); - X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this ); - // http://nanto.asablo.jp/blog/2011/12/08/6237308 // IE 6/7 で文書間通信を実現するための一案 if( X_UA[ 'IE' ] < 9 ){ - this.xnodeIframe[ 'attr' ]( 'src', 'about:blank' ); + this[ 'attr' ]( 'src', 'about:blank' ); }; // Safari 2.0.* bug: iframe's absolute position and src set. if( !X_UA[ 'Webkit' ] ){ - this.xnodeIframe[ 'css' ]( { position : 'absolute' } ); + this[ 'css' ]( { position : 'absolute' } ); }; - if( html ) this._contentHTML = html; - }, - - 'handleEvent' : function( e ){ - var raw = this.xnodeIframe[ '_rawObject' ]; + if( html ) this._contentHTML = html; - switch( e.type ){ - case X_EVENT_AFTER_UPDATE : - this._iwin = raw.contentWindow || ( raw.contentDocument && raw.contentDocument.parentWindow ) || window.frames[ this._name ]; - // http://d.hatena.ne.jp/NeoCat/20080921/1221940658 - // こちらに名前をsetしないとtargetが動作しない - if( X_UA[ 'IE' ] ) this._iwin.name = this._name; - - this.xnodeIframe[ 'listen' ]( [ X_UA[ 'IE' ] < 9 ? 'readystatechange' : 'load', 'error' ], this ); - - if( !( X_UA[ 'IE' ] < 9 ) ){ - this._contentHTML && X_Util_NinjaIframe_writeToIframe( this ); - this._ready = true; - return; - }; - break; - - case 'readystatechange' : - if( ( raw.readyState !== 'complete' && raw.readyState !== 'loaded' ) ) break; - // ie9- - if( !this._ready ){ - this._contentHTML && X_Util_NinjaIframe_writeToIframe( this ); - this._ready = true; - break; - }; - // onload - case 'load' : - console.log( 'iframe load.' ); - this[ 'asyncDispatch' ]( X_EVENT_SUCCESS ); - break; - - case 'error' : - this[ 'asyncDispatch' ]( X_EVENT_ERROR ); - break; - }; + this[ 'appendTo' ]( X_Node_systemNode ) + [ 'listenOnce' ]( X_EVENT_KILL_INSTANCE, X_Util_NinjaIframe_handleEvent ); - return X_Callback_STOP_PROPAGATION; + X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Util_NinjaIframe_handleEvent ); }, + /** + * iframe 内をリフレッシュ、または内容を上書きする + * @param {string=} opt_contentHTML html文字列 + * @return {NinjaIframe} チェーンメソッド + */ 'refresh' : function( opt_contentHTML ){ - var raw = this.xnodeIframe[ '_rawObject' ], + var raw = this[ '_rawObject' ], idoc; this._ready = false; @@ -108,30 +98,72 @@ X[ 'Util' ][ 'NinjaIframe' ] = X_EventDispatcher[ 'inherits' ]( this._iwin.location.reload(); }; - if( !opt_contentHTML ) return this; + if( !X_Type_isString( opt_contentHTML ) ) return this; this._contentHTML = opt_contentHTML; - X_UA[ 'IE' ] < 9 || X_Util_NinjaIframe_writeToIframe( this ); + + if( !( X_UA[ 'IE' ] < 9 ) ){ + X_Util_NinjaIframe_writeToIframe( this ); + }; return this; - }, - - 'close' : function(){ - X_ViewPort[ 'unlisten' ]( X_EVENT_AFTER_UPDATE, this ); - this.xnodeIframe.call( 'close' ); - this.xnodeIframe.destroy(); } } ); + +function X_Util_NinjaIframe_handleEvent( e ){ + var raw = this[ '_rawObject' ]; + + switch( e.type ){ + case X_EVENT_AFTER_UPDATE : + this._iwin = raw.contentWindow || ( raw.contentDocument && raw.contentDocument.parentWindow ) || window.frames[ this._name ]; + // http://d.hatena.ne.jp/NeoCat/20080921/1221940658 + // こちらに名前をsetしないとtargetが動作しない + if( X_UA[ 'IE' ] ) this._iwin.name = this._name; + + this[ 'listen' ]( X_UA[ 'IE' ] < 9 ? 'readystatechange' : [ 'load', 'error' ], X_Util_NinjaIframe_handleEvent ); + + if( !( X_UA[ 'IE' ] < 9 ) ){ + X_Util_NinjaIframe_writeToIframe( this ); + return; + }; + //break; これあると IE8 で駄目! + + case 'readystatechange' : + if( ( raw.readyState !== 'complete' && raw.readyState !== 'loaded' ) ) break; + // ie9- + if( !this._ready ){ + X_Util_NinjaIframe_writeToIframe( this ); + break; + }; + // onload + case 'load' : + console.log( 'iframe load.' ); + this[ 'asyncDispatch' ]( 'ninjaload' ); + break; + + case 'error' : + this[ 'asyncDispatch' ]( 'ninjaerror' ); + break; + + case X_EVENT_KILL_INSTANCE : + X_ViewPort[ 'unlisten' ]( X_EVENT_AFTER_UPDATE, this, X_Util_NinjaIframe_handleEvent ); + this._iwin && this._iwin.close(); + break; + }; + + return X_CALLBACK_STOP_PROPAGATION; +}; + function X_Util_NinjaIframe_writeToIframe( that ){ - var raw = that.xnodeIframe[ '_rawObject' ], + var raw = that[ '_rawObject' ], idoc = raw.contentDocument || that._iwin.document, html = that._contentHTML; - + + that._ready = true; // これを削除すると ie6,7,8 で Stack overflow at line : 0 意味不明 'readystatechange' が繰り返し起こりループする?? delete that._contentHTML; - that._ready = true; idoc.open(); idoc.writeln( html );