Как опубликовать параметр в запросе Iframe

Question

Сейчас я делаю то, что я добавляю несколько параметров в URL-адрес и отправляю этот URL-адрес серверу, который возвращает мне что-то. до сих пор это нормально работает. 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; 
    } 
} 

}; 

До сих пор код работает хорошо. Теперь я хочу отправить текстовые данные, которые я не могу отправить, добавив в uri. поэтому я создаю форму, но не могу решить, как отправить это значение формы с помощью этого метода.

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

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


</form> 

Answer 1

Используйте target атрибут для form, необходимо указать один следующие:

• _blank - новая страница кадр - шоу в IFRAME с заданным именем
• _self - показать в том же iframe, где находится форма
• _parent - показать на родительской странице/iframe формы iframe
• _top - самое верхнее окно

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> 

Отрывки на ТАК sandbox'd, так что вы не можете видеть, что это работает. отметьте http://output.jsbin.com/yemebaladi, чтобы увидеть, как поток запросов.

Answer 2

Рассмотрим postMessage в качестве решения для передачи данных из одного окна/фрейма к другому:

В вашем 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> 

И в вашем iframe.html:

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

Приведенный ниже пример ion http://html5demos.com/postmessage2