javascript - 将变量 - 值传递给我的 fancybox iframe

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>