单击传单弹出窗口中的链接时打开 Fancybox Iframe答案

【问题标题】：Open Fancybox Iframe when click on a link in a Leaflet Popup单击传单弹出窗口中的链接时打开 Fancybox Iframe
【发布时间】：2015-11-03 01:42:17
【问题描述】：

我用 Leaflet 制作了一张地图。这张地图由点组成；当用户点击一个点时，它会打开一个弹出窗口，其中包含信息和一个链接，用于在新页面中打开表单。挺好的。
现在我希望链接在 iframe 中打开，而不是在新页面中打开。我想使用 FancyBox。

为此，我将 Fancybox 链接放在我的 html 页面中（我有 1.9.1 版的 JQuery）：

<link rel="stylesheet" href="/maquette/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript" src="/maquette/biblio/jquery.fancybox-1.3.4.pack.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $("#various3").fancybox({
            'width'         : '95%',
            'height'        : '95%',
            'autoScale'     : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'          : 'iframe'
        });

        });
</script>

html 文件调用一个 JS 文件，我在其中构建我的地图。我这样配置弹出窗口：

   var pl = L.geoJson(ptslum, {
    pointToLayer: function (feature, latLng) {
      return new L.Marker(latLng, {
        icon: new myIcon({
          iconUrl: '/maquette/css/iconPL2.png'
        })
      }).bindPopup("<b><center><FONT color = 999999> La référence du point lumineux sélectionné est </b>" + "<b>" + feature.properties.pl_ref_sdeer + "</b></FONT><br><br>" 
        + "<a class = \"iframe\" href = \"form/declapanne.php?id=" + feature.properties.pl_ref_sdeer + "\"> Cliquer pour déclarer la panne</a></center> "                       
        );
  }
});

但什么也没有发生：表单总是在一个新页面中..

你知道如何在 Leaflet 和 FancyBox 之间建立联系吗？

谢谢！

【问题讨论】：

这听起来更像是一个配置正确链接来做你想做的事情的问题。标记弹出窗口显示一些常规的 HTML 内容，所以我怀疑 Leaflet 与您的问题有关。

标签： javascript iframe fancybox leaflet

【解决方案1】：

弹出窗口的内容会在弹出窗口打开时添加到 DOM，并在弹出窗口关闭时删除。因此，如果您需要对弹出窗口中的内容进行操作/处理，则需要在弹出窗口打开时执行此操作。您可以监听 L.Map 实例触发的 popupopen 事件：

var map = new L.Map('leaflet')
    .setView([0, 0], 0);

var marker = new L.Marker([0, 0])
    .bindPopup('<div id="foo"></div')
    .addTo(map);

document.getElementById('foo'); // Nope

map.on('popupopen', function () {
    document.getElementById('foo') // Yup
})

map.on('popupclose', function () {
    document.getElementById('foo') // Nope
})

因此，当使用 Fancybox 时，您只能在弹出窗口打开后进行初始化，鉴于此弹出窗口内容：

<a id="single_image" href="image_big.jpg">
    <img src="image_small.jpg" alt=""/>
</a>

您可以像这样在popupopen 上初始化 Fancybox：

map.on('popupclose', function () {
    $("a#single_image").fancybox();
})

【讨论】：