Question

问题在于：

我有一个fancybox iframe，这样启动：

$(".caller").fancybox({
    type : "iframe",
    closeBtn : true,
    iframe : {preload : false},
});

它会调用这样一个简单的形式：

<form ......>
    <label>Test : </label>
    <br>
    <input type="text" name="myInput" id="myInput" value=""/>
</form>

我尝试在我的iframe弹出时设置默认值，所以我在init中添加它：

...
beforeShow : function(){
    $("#myInput").val("test value");
}

但它没有效果......：/

Answer 1

您有两种选择：

选项1：您可以通过HTTP-GET参数将值传递给iframe，并在iframe中读取它。
选项2：另一方面，您可以使用postMessaging API在两个帧之间进行通信。此时的跨窗口消息传递安全模型是双向的。这意味着发件人确保接收域为targetDomain。接收方检查消息是否来自正确的event.origin。

示例发件人：

<iframe src="http://a.JavaScript.info/files/tutorial/window/receive.html" id="iframe" style="height:60px"></iframe>

<form name="form">
  <input type="text" name="msg" value="Your message"/>
  <input type="submit"/>
</form>

<script>

  var win = document.getElementById("iframe").contentWindow

  document.forms.form.onsubmit = function() {
    win.postMessage(
      this.elements.msg.value,
      "http://a.JavaScript.info" 
    )
    return false
  }

</script>

示例接收者：

<div id="test">Send me a message!</div>
<script>
function listener(event){
  if ( event.origin !== "http://javascript.info" )
    return

  document.getElementById("test").innerHTML = "received: "+event.data
}

if (window.addEventListener){
  addEventListener("message", listener, false)
} else {
  attachEvent("onmessage", listener)
}
</script>

<强>更新

您可以使用类似的内容在提交后删除iframe。

的index.html

<iframe id="frame" src="frame.html" id="iframe" style="height:60px"></iframe>
<script>

  function closeIframe(){
     $('#frame').remove;
  }

</script>

frame.html：

<form id="my-form" name="form">
  <input type="text" name="msg" value="Your message"/>
  <input type="submit"/>
</form>
<script>
    $('#my-form').submit(function(e){
         e.preventDefault();
         $.ajax({
                 url: 'http://host.com/action/',
                 type: 'POST',
                 data: new FormData(this),
                 processData: false,
                 contentType: false
                }).success(function(){
                      parent.closeIframe();
                   });
   });
</script>

传递变量 - 值到我的fancybox iframe

1 个答案: