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

问题是：

我有一个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>

但它没有效果…：/

您有两个选择：

• 选项1:通过HTTP-GET参数将值传递给iframe，并在iframe中读取

• 选项2:在另一侧，您可以使用在两个帧之间进行通信。此时，跨窗口消息传递安全模型是双向的。这意味着发送方确保接收域是

  targetDomain

  。接收者检查消息是否来自正确的

  事件源
  

示例发件人：

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

var win=document.getElementById（“iframe”）.contentWindow
document.forms.form.onsubmit=函数（）{
博文(
this.elements.msg.value，
"http://a.JavaScript.info" 
)
返回错误
}

示例接收器：

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

给我发个信息！
函数侦听器（事件）{
如果（event.origin！==”http://javascript.info" )
返回
document.getElementById（“测试”）.innerHTML=“已接收：”+event.data
}
if（window.addEventListener）{
addEventListener（“消息”，侦听器，false）
}否则{
attachEvent（“onmessage”，侦听器）
}

更新

您可以使用类似的方法在提交后删除iframe

index.html

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

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

</script>

函数closeIframe（）{
$（'框架'）。删除；
}

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>

$（“#我的表格”）。提交（函数（e）{
e、 预防默认值（）；
$.ajax({
网址：'http://host.com/action/',
键入：“POST”，
数据：新表单数据（本），
processData:false，
contentType:false
}).success（函数（）{
parent.closeIframe（）；
});
});

为什么不在html中设置它们？iframe在不同的范围内。将其视为完全独立的浏览器窗口/页面。将脚本添加到iframes源代码中。从外观上看，由于preload设置为false，您实际上没有设置任何内容，因为它没有预加载。您是否有包含html表单的文件？这个文件是在fancybox打开后立即加载的吗？顺便问一下，你在哪里找到beforeShow（）之前的

？谢谢你的回答，现在我通过获取传递值。。。到iframe。这是我认为最简单的方法。。。但是，当我在iframe上提交表单时，我希望自动关闭iframe（容器），并在“调用者”页面中启动jquery函数……您可以在父窗口中定义一个函数，该函数将从脚本中的脚本调用。您可以为此使用

父对象。类似这样的
parent.closeIframe（）
有关更多信息，请参见，您的意思是，当我在iframe（称为元素）上时，如果我调用像$（“#caller”）这样的jquery元素，它将在父级上获取相关元素？即使脚本被写入“called”元素？（idk，如果我清楚的话…：P）您可以在包含iframe的主窗口中定义一个函数closeIframe（）

。在iframe的javascript中，您只需调用

parent.closeIframe（）

。谢谢：）！可能您删除iframe太早了。我已经更新了第二个示例。所以你可以看到我会如何处理这件事。我的示例中的所有表单数据都是通过ajax发送的。成功后，将调用父窗口的函数

closeIframe（）

。

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