composite/prepared.iframe.js

## prepared.iframe.js
/**
* prepared iFrame for javascript
* Composite (ukjinplant at msn dot com)
* http://composite.tistory.com
* usage :
*   preparedFrame('child')
*     .prepare(function(){
*       form.target='child';
*       form.submit();
*     }).load(function(){
*       alert('submit complete!');
*     });
* License : MIT
*/
(function(doc){
  var root=doc.documentElement,
    __defer=function(o){
      var that=this;
      this.fn={};
      this.prepare=function(f){that.fn.prepare=f;return that;};
      this.load=function(f){that.fn.load=f;return that;};
      this.frame=o;
    };
  this.preparedFrame=function(name){
    var frame=doc.createElement('iframe'),style=frame.style;
    style.width='0';style.height='0';style.visibility='hidden';
    var defer=new __defer(frame),
      prepare=function(e){
        e=e||window.event;
        if(typeof(defer.fn.load)=='function') defer.fn.load.call(this,e);
        root.removeChild(frame);
      };
    frame.onload=function(e){
      e=e||window.event;
      if(typeof(defer.fn.prepare)=='function') defer.fn.prepare.call(this,e);
      frame.onload=prepare;
    };
    frame.name=name;frame.src='about:blank';
    root.appendChild(frame);
    return defer;
  };
}).call(window,document);

## test.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR" trimDirectiveWhitespaces="true"%>
<%
  if("POST".equalsIgnoreCase(request.getMethod())){
	    %><script>alert('POST 성공\n\n<%=request.getQueryString()%>');</script><%
	    return;
	}
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="euc-kr">
		<title>prepared.iframe 1.0</title>

	</head>
	<body>
		<form id="testform" method="post" action="" enctype="multipart/form-data" accept-charset="euc-kr">
			<label>이름 : <input type="text" name="name"></label><br>
			<label>나이 : <input type="number" name="age"></label><br>
			<label>성별 : <select name="gender"><option value="M">남</option><option value="F">여</option></select></label><br>
			<label>사진 : <input type="file" name="pic"></label><br>
			<button type="submit">등록하기</button>
		</form>
		<script>
			(function(doc){
				'use strict';
				var ID=function(a){return doc.getElementById(a);},C=function(a){return doc.createElement(a);},cw='contentWindow',de='documentElement',ie='v'=='\v',
					__defer=function(o){
						var th=this,iso=true;
						th.fn={prepare:0,load:0};th.frame=o;
						for(var n in th.fn)
							(function(m){
								th[m]=function(f){
									th.fn[m]=f;
									if(iso&&m=='prepare') th.frame[cw].document.close();
									return th;
								};
							})(n);
						this.retry=function(){window.preparedFrame(th.frame.name,th);return th;};
						this.abort=function(){th.frame.src=null;return th;};
						this.toString=function(){return '[object preparedFrame]'};
					};
			  window.preparedFrame=function(name,old){
			    var frame=C('iframe'),style=frame.style,root=doc[de],isdef=old instanceof __defer;
			    style.width='0';style.height='0';style.visibility='hidden';
			    var defer=frame.defer=isdef?(old.frame=frame,old):new __defer(frame),
			      prepare=function(e){
			        e=e||window.event;
			        if(typeof(defer.fn.load)=='function') defer.fn.load.call(this,e);
			        root.removeChild(frame);
			      };
			    frame.onload=function(e){
			      e=e||window.event;//alert(defer.fn.prepare);
			      if(typeof(defer.fn.prepare)=='function') defer.fn.prepare.call(this,e);
			      frame.onload=prepare;
			    };
			    frame.setForm=function(f){
			    	var root=frame[cw].document[de];
					if(frame.form) root.removeChild(root.lastChild);
					if(typeof(f)=='string') f=ID(f)||doc.forms[f];
					frame.form=root.appendChild(f.cloneNode(true));
					return frame.form;
				};
			    frame.name=name||'';//frame.src='about:blank';
			    root.appendChild(frame);
			    var fd=frame[cw].document;
			    fd.open();
			    fd.write('<!DOCTYPE html><html><head></head><body></body></html>');
			    //fd.close();
			    return defer;
			  };
			})(document);
			//alert(window.preparedFrame);
			document.getElementById('testform').onsubmit=function(){
				var form=this;
				preparedFrame().prepare(function(){
					alert('prepare called.');
					this.setForm(form).submit();
				}).load(function(){
					alert('onload called.');
				});
				return false;
			};
		</script>
	</body>
</html>
	/**
	* prepared iFrame for javascript
	* Composite (ukjinplant at msn dot com)
	* http://composite.tistory.com
	* usage :
	* preparedFrame('child')
	* .prepare(function(){
	* form.target='child';
	* form.submit();
	* }).load(function(){
	* alert('submit complete!');
	* });
	* License : MIT
	*/
	(function(doc){
	var root=doc.documentElement,
	__defer=function(o){
	var that=this;
	this.fn={};
	this.prepare=function(f){that.fn.prepare=f;return that;};
	this.load=function(f){that.fn.load=f;return that;};
	this.frame=o;
	};
	this.preparedFrame=function(name){
	var frame=doc.createElement('iframe'),style=frame.style;
	style.width='0';style.height='0';style.visibility='hidden';
	var defer=new __defer(frame),
	prepare=function(e){
	e=e\|\|window.event;
	if(typeof(defer.fn.load)=='function') defer.fn.load.call(this,e);
	root.removeChild(frame);
	};
	frame.onload=function(e){
	e=e\|\|window.event;
	if(typeof(defer.fn.prepare)=='function') defer.fn.prepare.call(this,e);
	frame.onload=prepare;
	};
	frame.name=name;frame.src='about:blank';
	root.appendChild(frame);
	return defer;
	};
	}).call(window,document);
	<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR" trimDirectiveWhitespaces="true"%>
	<%
	if("POST".equalsIgnoreCase(request.getMethod())){
	%><script>alert('POST 성공\n\n<%=request.getQueryString()%>');</script><%
	return;
	}
	%>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="euc-kr">
	<title>prepared.iframe 1.0</title>

	</head>
	<body>
	<form id="testform" method="post" action="" enctype="multipart/form-data" accept-charset="euc-kr">
	<label>이름 : <input type="text" name="name"></label><br>
	<label>나이 : <input type="number" name="age"></label><br>
	<label>성별 : <select name="gender"><option value="M">남</option><option value="F">여</option></select></label><br>
	<label>사진 : <input type="file" name="pic"></label><br>
	<button type="submit">등록하기</button>
	</form>
	<script>
	(function(doc){
	'use strict';
	var ID=function(a){return doc.getElementById(a);},C=function(a){return doc.createElement(a);},cw='contentWindow',de='documentElement',ie='v'=='\v',
	__defer=function(o){
	var th=this,iso=true;
	th.fn={prepare:0,load:0};th.frame=o;
	for(var n in th.fn)
	(function(m){
	th[m]=function(f){
	th.fn[m]=f;
	if(iso&&m=='prepare') th.frame[cw].document.close();
	return th;
	};
	})(n);
	this.retry=function(){window.preparedFrame(th.frame.name,th);return th;};
	this.abort=function(){th.frame.src=null;return th;};
	this.toString=function(){return '[object preparedFrame]'};
	};
	window.preparedFrame=function(name,old){
	var frame=C('iframe'),style=frame.style,root=doc[de],isdef=old instanceof __defer;
	style.width='0';style.height='0';style.visibility='hidden';
	var defer=frame.defer=isdef?(old.frame=frame,old):new __defer(frame),
	prepare=function(e){
	e=e\|\|window.event;
	if(typeof(defer.fn.load)=='function') defer.fn.load.call(this,e);
	root.removeChild(frame);
	};
	frame.onload=function(e){
	e=e\|\|window.event;//alert(defer.fn.prepare);
	if(typeof(defer.fn.prepare)=='function') defer.fn.prepare.call(this,e);
	frame.onload=prepare;
	};
	frame.setForm=function(f){
	var root=frame[cw].document[de];
	if(frame.form) root.removeChild(root.lastChild);
	if(typeof(f)=='string') f=ID(f)\|\|doc.forms[f];
	frame.form=root.appendChild(f.cloneNode(true));
	return frame.form;
	};
	frame.name=name\|\|'';//frame.src='about:blank';
	root.appendChild(frame);
	var fd=frame[cw].document;
	fd.open();
	fd.write('<!DOCTYPE html><html><head></head><body></body></html>');
	//fd.close();
	return defer;
	};
	})(document);
	//alert(window.preparedFrame);
	document.getElementById('testform').onsubmit=function(){
	var form=this;
	preparedFrame().prepare(function(){
	alert('prepare called.');
	this.setForm(form).submit();
	}).load(function(){
	alert('onload called.');
	});
	return false;
	};
	</script>
	</body>
	</html>