jquery – 在UI对话框中加载iframe不起作用

2019年7月28日 117次阅读

我想在UI对话框中加载和显示iframe,它将通过点击通过jQuery函数动态生成的元素打开.

这是我的代码

HTML

<div id="eventContent" title="Event" style="display:none;">
<div id="map"></div>
</div>

jQuery的

$('#map').html(event.map);
$('#eventContent').dialog({modal: true});

event.map是变量的,其中包含HTML字符串,如下所示,并将根据用户点击的元素而改变.

简而言之,除了HTML代码之外,一切都是动态生成的数据和HTML.

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9927.782117587185!2d-0.1578822!3d51.5325589!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc2ee490704162539!2sThe+Hub!5e0!3m2!1sen!2suk!4v1452460618657" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

但这只是在对话框中显示字符串,我希望在其中加载iframe.

最佳答案 没有关于这个项目的更多细节,这就是我的建议.假设：

>每个事件都有一个地图
>存在可以启动对话框的按钮或链接
>按钮或链接将具有用于iframe的URL

工作实例：https://jsfiddle.net/Twisty/9dk8jrqc/

HTML

<div id="eventContent" title="Event">
  <div id="map"></div>
</div>
<button id="show">
  Show Event
</button>

jQuery的

var event = {
  "map": "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9927.782117587185!2d-0.1578822!3d51.5325589!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc2ee490704162539!2sThe+Hub!5e0!3m2!1sen!2suk!4v1452460618657"
};
$(function() {
  function showMap(url) {
    $('#eventContent div#map').html("");
    var frame = $("<iframe>", {
      width: 600,
      height: 450,
      frameborder: 0,
      allowfullscreen: true
    }).css("border", 0);
    frame.attr("src", url);
    frame.appendTo($("#eventContent div#map"));
    $('#eventContent').dialog("open");
  }
  $('#eventContent').dialog({
    autoOpen: false,
    modal: true,
    width: 640,
    height: 480
  });
  $('#show').click(function() {
    showMap(event.map)
  });
});

为了使解决方案保持动态,我建议使用一个函数来收集用于iframe的源代码.如果有较旧的iframe,则会从之前的操作中清除.然后,我使用新源动态创建iframe,并将其附加到#map.完成后,我在对话框上调用open.

您可以将showMap()与许多不同的点击事件一起使用,并为其提供您希望在iframe中显示的任何URL.

我可能还建议存储URL或从链接中获取URL.例如,如果每个事件都有一个指向地图的链接,例如：

<a class="mapLink" href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9927.782117587185!2d-0.1578822!3d51.5325589!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc2ee490704162539!2sThe+Hub!5e0!3m2!1sen!2suk!4v1452460618657">Show Map</a>

您可以收集此信息并像这样使用它：

$(".mapLink").click(function(e){
  e.preventDefault();
  showMap($(this).attr("href"));
});

这也可以使用data-map-url作为属性存储在按钮中.

点赞