Iframe 요청에 매개 변수를 게시하는 방법

Question

지금 내가하고있는 일은 URL에 몇 가지 매개 변수를 추가하고 해당 URL을 서버에 게시하여 해당 내용을 복구하는 것입니다. 이것은 지금까지 잘 작동합니다. URL :

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

사용 targetform에 대한 속성, 사용자가 지정하는 하나 다음 :

• _blank - 새 페이지 프레임 - 같은에서 쇼 - 지정된 이름
• _self와 함께있는 iframe 쇼 양식이있는 iframe
• _parent - 양식 iframe의 상위 페이지/iframe에 표시
• _top - 맨 대부분의 윈도우

  Credits - DavidLin

당신이 작동하고 볼 수 있도록 SO sandbox'd 있습니다에

<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> 

조각. http://output.jsbin.com/yemebaladi을 확인하여 요청 흐름을 확인하십시오. 당신의 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에 :

Answer 2

다른 하나의 창/프레임에서 데이터를 전송하기위한 솔루션으로 postMessage을 고려

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

이 예는 ion of http://html5demos.com/postmessage2