如何在 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的精简版

Answer 2

为form 使用target 属性，您指定以下之一：

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

SO 上的片段是沙盒的，所以你看不到它正在工作。检查http://output.jsbin.com/yemebaladi 以查看请求的流程。