javascript - 如何在 Iframe 请求中发布参数

Question

现在我正在做的是在 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

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

该示例是 http://html5demos.com/postmessage2 的精简版