我想在 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。
最佳答案
如果没有关于这个项目的更多细节,这就是我的建议。假设:
- 每个事件都有一张 map
- 存在启动对话框的按钮或链接
- 按钮或链接将有一个用于
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
。完成后,我在对话框中调用打开。
您可以将 showMap()
与许多不同的点击事件一起使用,并为其提供您希望在 iframe
中显示的任何 URL。
我可能还建议存储 URL 或从链接中获取它。例如,如果每个事件都有一个指向 map 的链接,例如:
<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
作为属性存储在按钮中。
关于jquery - 在 UI 对话框中加载 iframe 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39543174/