How to post a parameter in Iframe request

Question

Right now what i am doing is that i append few parameters in url and post that url to server which revert me the something. this is working fine till now. Url is

var uri = "test.html?isJSON=true";

AIM.download(uri,{'onStart' : function(){return true;}, 'onComplete' : function(response){
    if(response==undefined || response=="")
        return;
    setMessage("generateMessage",response,"error");
    }});



 AIM = { 
frame : function(c,u) {

    var n = 'f' + Math.floor(Math.random() * 99999);
    var token = "";
    if(u==undefined || u=="")
        u="about:blank";
    if(JSLI.TOKEN_VALUE && JSLI.TOKEN_VALUE !=""){
        if(u && u.indexOf('?') != -1) {
            u = u + '&' +JSLI.TOKEN_NAME+"="+JSLI.TOKEN_VALUE;
        } else {
            u = u + '?' +JSLI.TOKEN_NAME+"="+JSLI.TOKEN_VALUE;
        }
    }

    var d = document.createElement('DIV');
    d.innerHTML = '<iframe style="display:none" src="'+ u +'" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
    document.body.appendChild(d);

    var i = document.getElementById(n);
    if (c && typeof(c.onComplete) == 'function') {
        i.onComplete = c.onComplete;
    }

    return n;
},

form : function(f, name) {
    f.setAttribute("action", attachToken(f.action));
    f.setAttribute('target', name);
},

submit : function(f, c) {
    AIM.form(f, AIM.frame(c));
    if (c && typeof(c.onStart) == 'function') {
        return c.onStart();
    } else {
        return true;
    }
},

loaded : function(id) {
    var i = document.getElementById(id);
    if (i.contentDocument) {
        var d = i.contentDocument;
    } else if (i.contentWindow) {
        var d = i.contentWindow.document;
    } else {
        var d = window.frames[id].document;
    }
    if (d.location.href == "about:blank"
        && i.src == "about:blank") {
        return;
    }
    if(d.location.href.indexOf("login.html?expired=true")!=-1){
        document.location.href = "login.html?expired=true";
        return;
    }
    if (typeof(i.onComplete) == 'function') {
        i.onComplete(d.body.innerHTML);
    }
},
download:function(u,c)
{
    AIM.frame(c,u);
    if (c && typeof(c.onStart) == 'function') {
        return c.onStart();
    } else {
        return true;
    }
}

};

Till here code is working good. Now i want to send a text data also which i can't send by doing append in uri. so i create a form but m not able to solve how to send this form value using this method.

<form id="frmKey" name="frmKey">       

<input type="hidden" name="txt" id="txt"/>


</form>

Answer 1

Consider postMessage as a solution to send data from one window/frame to another:

In your main.html:

<form>
<p><label for="message">Message</label>
<input type="text" name="msg" value="text to send" id="msg" /> 
<input type="submit" />
</p>
<iframe id="iframe" src="http://your.server/iframe.html"></iframe>
</form>

<script>
  var frame = document.getElementById('iframe').contentWindow;
  document.querySelector('form').addEventListener('submit', (e) => {
    frame.postMessage(document.getElementById('msg').value, 'http://your.server');
    e.preventDefault();
  }, false);
</script>

And in your iframe.html:

<div id="msg"></div>
<script>
function receive( ev ){
  document.getElementById('msg').innerHTML = ev.data;
}
window.addEventListener("message", receive, false);
</script>

The example is a stripped down version of http://html5demos.com/postmessage2

Answer 2

Use target attribute for form, you specify one the followings:

• _blank - new page frame - show in the iframe with the given name
• _self - show in the same iframe where the form locates
• _parent - show in the parent page/iframe of the form's iframe
• _top - the top most window

Credits - DavidLin

<form target="form-iframe" method="POST">
  <input name="name" type="text"/>
  <input name="email" type="text"/>
  <input value="Submit" type="submit"/>
</form>
<iframe name="form-iframe" src=""></iframe>

Snippets on SO are sandbox'd so you cannot see it's working. check http://output.jsbin.com/yemebaladi to see how the request flow.