Dynamic Post with Iframe

標題：在JavaScript使用虛擬form送出post並以iframe讀取text
JavaScript (index.html)：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

<button id="test">test</button> <div id="show">show</div> <script type="text/javascript"> function $(id) { switch(id.substr(0,1)) { case '#': return document.getElementById(id.substr(1)); case '.': var elems = document.body.getElementsByTagName('*'); var target = id.substr(1); var result=[]; for(i=0;j=elems[i];i++) { if((j.className).indexOf(target)!=-1) result.push(j); } return result; default: return document.getElementsByTagName(id); } } var loadpost = { current : null, queue : [], request : function(q) { //Create iframe try { //IE var iframe = document.createElement('<iframe name="loadboxy">'); } catch (e) { var iframe = document.createElement('iframe'); } iframe.style.display = 'none'; iframe.name = 'loadboxy'; iframe.id = 'loadboxy'; if(iframe.attachEvent) { iframe.attachEvent("onload", function(){ loadpost.load(); }); } else { iframe.onload = function(){ loadpost.load(); }; } //Create form var form = document.createElement('form'); form.target = 'loadboxy'; form.action = q.url; form.method = 'post'; form.style.display = 'none'; for(var key in q.param) { if(q.param[key].constructor == Array) { for(var i=0;i<q.param[key].length;i++) { var input = document.createElement('input'); input.type = 'hidden'; input.name = key; input.value = q.param[key][i]; form.appendChild(input); } } else { var input = document.createElement('input'); input.type = 'hidden'; input.name = key; input.value = q.param[key]; form.appendChild(input); } } //Queue this.queue.push({ form : form, iframe : iframe, flag : 0, load : q.load }); if (!this.current) this.action(); }, task : function() { var iFrame = this.current.iframe; var iFrameBody; if (iFrame.contentDocument) //FF iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; else if (iFrame.contentWindow) //IE iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; this.current.load(iFrameBody.innerHTML); }, load : function() { if(this.current.flag == 1) { this.task(); $('body')[0].removeChild(this.current.iframe); $('body')[0].removeChild(this.current.form); this.action(); } else { this.current.flag = 1; this.send(); } }, action : function() { this.current = null; if(this.queue.length) { this.current = this.queue.shift(); $('body')[0].appendChild(this.current.iframe); } }, send : function() { $('body')[0].appendChild(this.current.form); this.current.form.submit(); } }; $('#test').onclick = function() { loadpost.request({ url : "action.php", param : { 'num1' : 10, 'num2' : 20, 'num[]' : new Array(30, 40) }, load : function(data) { $('#show').innerHTML = data; } }); }; </script>

PHP (index.php)：

1 2 3 4 5 6 7 8 9 10 11 12

<?php $num1 = !empty($_POST['num1']) ? $_POST['num1'] : null; $num2 = !empty($_POST['num2']) ? $_POST['num2'] : null; $num3 = rand(0,10); $num = !empty($_POST['num']) ? $_POST['num'] : null; $sum = 0; foreach($num as $value) { $sum += $value; } $total = $num1 + $num2 + $num3 + $sum; echo $num1."+".$num2."+".$num3."+".$sum."=".$total; ?>

說明：
使用純JavaScript動態在Head產生Iframe及在Body產生Form送出Post後，呼叫函式取得Text資料。