Skip to content

Instantly share code, notes, and snippets.

@composite

composite/prepared.iframe.js

Last active October 13, 2015 23:37
Show Gist options
  • Save composite/4273555 to your computer and use it in GitHub Desktop.
Save composite/4273555 to your computer and use it in GitHub Desktop.
Download ZIP
My prepared iframe request for Javascript. useful for iframe streaming request or form request.
Raw
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);
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment