Fancybox（jQuery） - 将信息从父级传递给iframe和iframe回到父级

Question

我试图在我的页面上打开fancybox iframe。将一些基本信息传递给iframe。然后，我想让iframe与其父母交谈。

我传递填充NameID-1在整个静态，但我真的想有这样的可变如：var nameid=$(this).attr('nameid')

我只是不知道，因为我是新来的Ajax如何将所有正确执行这个/ Javascript和与逻辑挣扎。

base.html文件

JS：

<script type='text/javascript'> 
//<![CDATA[ 
// Popup Function 
$(document).ready(function() { 
    $('a.openinformation').fancybox({ 
     openEffect: 'fade', 
     openSpeed: 500 //, 
    }); 
}); 
// Update from iFrame 
function setInformation(userText) { 
    $('#displayfield-nameid-1').html(userText); 
    $('#showhide-nameid-1').show(); 
} 
//]]> 
</script> 

HTML：

<div> 
    <a class="openinformation fancybox.iframe" href="iframe.html" nameid= "1" originalname="Mary Poppins" >Mary Poppins</a> 
</div> 

<div id ="showhide-nameid-1" style=" display:none; background:#0CF;"> 
    <p>Replacement Name: <span id="displayfield-nameid-1"></span></p> 
</div> 

Iframe.html的

JS：

<script type='text/javascript'> 
//<![CDATA[ 
// Start 
$(window).load(function() { 
    // When Loaded get going. 
    $(document).ready(function() { 
     $('a.doupdate').click(function() { 
      parent.setInformation($(this).text()); 
      parent.$.fancybox.close(); 
     }); 
     $('a.closeremove').click(function() { 
      parent.$('#showhide-nameid-1').hide(); 
      parent.$.fancybox.close(); 
     }); 
    }); 
}); 
//]]> 
</script> 

HTML

<p>The old name: $originalname;</p> 
<p>The id for this column is: $nameid</p> 

<p>Please select a new name:</p> 
<div><a class="doupdate" href="#">Display new married name : Mary Smith</a></div> 
<div><a class="doupdate" href="#">Display new married name: Sandy Shore</a></div> 
<div><a class="closeremove" href="#" id="1">Clear (Hide) married Names Box</a></div> 

Answer 1

你提的问题可以分为两个部分跳水：

1. 如何从父页面的数据（存储在变量）传递到一个iframe（在的fancybox打开）
2. 如何在iframe中处理数据（和/或将这些数据存储在变量中），然后在fancybox关闭时将这些值传递给父页面。

1）。通过从父页面的数据（的fancybox）IFRAME

我觉得你最好的选择是你的所有数据对象存储在一个单一的JavaScript，如：

var parentData = {}; 

...所以你可以通过一个单一的对象而不是几个变量的iframe。然后你就可以到对象不同的属性和值添加喜欢：

parentData.nameid  = "1"; 
parentData.originalname = "Mary Poppins"; 

...或更多，如果你需要这样。

可能仍然需要静态地传递信息，通过（HTML5）data属性，如：

<a data-nameid="1" data-originalname="Mary Poppins" href="iframe.html" class="openinformation">Mary Poppins</a> 

...和data值推入parentData对象的的fancybox beforeLoad回调中，如：

beforeLoad : function() { 
    parentData.nameid  = $(this.element).data("nameid"); 
    parentData.originalname = $(this.element).data("originalname"); 
} 

...这会给你更多的灵活性恕我直言。

现在，你需要在iframed网页上做的唯一一件事就是指那些性能为parent.parentData.nameid和parent.parentData.originalname你需要他们的时候，例如

有这个网站（Iframe.html的）

<p>The old name: <span id="originalname"></span></p> 
<p>The id for this column is: <span id="nameid"></span></p> 

...你可以使用这个脚本编写父对象的值这样的：

$("#nameid").text(parent.parentData.nameid); 
$("#originalname").text(parent.parentData.originalname); 

通知你不能做（如在php中）

<p>The old name: $originalname;</p> 

...所以我们使用<span>标签来通过javascript写入他们的内容。

---

2）。将数据从iframed页面传递到父页面。

你需要做的第一件事就是你的父页面申报，一个对象存储从iframe和处理功能的数据是这样的：

var iframeData = {}; 
function setInformation(data) { 
    return iframeData = data; 
}; 

然后在iframed网页上，你可以写不同性质/值到iframeData对象并运行iframe中setInformation()功能（在父页）的值传递到像父页面：

$(".doupdate").on("click", function (e) { 
    e.preventDefault(); 
    iframeData.newname = $(this).find("span").text(); // set object property/value 
    parent.setInformation(iframeData); // pass it to parent page 
    parent.$.fancybox.close(); 
}); 

上面的代码假设你有一个类似的HTML像

<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a> 

... 通知我包我想传递一个span标签名称。可选的，你可以在2 spans喜欢它分开：

<span class="fname">Mary</span><span class="lname">Smith</span> 

......和他们一样分隔值写：

iframeData.fname = $(this).find("span.fname").text(); 
iframeData.lname = $(this).find("span.lname").text(); 

对于清除按钮，我只想重新初始化变量和密切的fancybox像

$('a.closeremove').on("click", function (e) { 
    e.preventDefault(); 
    iframeData = {}; // reset variable 
    parent.setInformation(iframeData); // pass it to parent page 
    parent.$.fancybox.close(); 
}); 

...和使用的fancybox afterClose像回调从自身父页面执行父页面的操作：

afterClose : function() { 
    if (objLength(iframeData) > 0) { 
     $('#displayfield-nameid-1').html(iframeData.newname); 
     $('#showhide-nameid-1').show(); 
    } else { 
     $("#displayfield-nameid-1").empty(); 
     $('#showhide-nameid-1').hide(); 
    } 
} 

... 通知如果iframeData对象的长度比0大我将只显示选择#showhide-nameid-1。正因为如此，我需要一个函数来验证对象的length：

基于this答案，你可以这样做：

function objLength(iframeData) { 
    // ref https://stackoverflow.com/a/5533226/1055987 
    var count = 0, i; 
    for (i in iframeData) { 
     if (iframeData.hasOwnProperty(i)) { 
      count++; 
     } 
    } 
    return count; 
}; 

...这将返回对象的length 。

最后一个音符：

由于iframed网页上指的是使用前缀parent父页面，如果它开了一个iframe外面返回的js错误。您可能需要先验证试图从父页像访问数据来回/前如果iframed网页上实际包含的iframe中：

if (window.self !== window.top) { 
    // the page is inside an iframe 
} 

见DEMO和感觉自由探索源这两个页面的代码。