Jquery 在UI对话框中加载iframe不起作用
我想在UI对话框中加载和显示iframe,该对话框将通过单击通过jQuery函数动态生成的元素打开 这是我的密码 HTML 其中event.map是变量,它包含如下所示的HTML字符串,并将根据用户单击的元素而改变 简而言之,除了上面的HTML代码之外,所有内容都是动态生成的数据和HTMLJquery 在UI对话框中加载iframe不起作用,jquery,html,jquery-ui,iframe,Jquery,Html,Jquery Ui,Iframe,我想在UI对话框中加载和显示iframe,该对话框将通过单击通过jQuery函数动态生成的元素打开 这是我的密码 HTML 其中event.map是变量,它包含如下所示的HTML字符串,并将根据用户单击的元素而改变 简而言之,除了上面的HTML代码之外,所有内容都是动态生成的数据和HTML <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9927.782117587185!2d-0.1578822!3d51
<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。使用下面的代码解决您的问题
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
</head>
<div id="terms" style="display:none;">
<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>
</div>
<a id="showTerms" href="#">Show Terms & Conditions</a>
<script type="text/javascript">
$(document).ready(function(){
$('#showTerms').click(function(){
jQuery('#terms').dialog({modal:true});
});
});
</script>
$(文档).ready(函数(){
$('#showTerms')。单击(函数(){
jQuery('#terms').dialog({modal:true});
});
});
也可以通过jQuery创建临时元素,从iframe HTML字符串中获取src,然后将该src分配给iframe
我的HTML代码
<div id="eventContent" title="Event" style="display:none;">
<div id="map"><iframe src=""></iframe></div>
</div>
jQuery代码
$vars = $('<div>' + event.map + '</div>');
$srcs = $vars.children('iframe').attr('src');
$('#map iframe').attr('src',$srcs);
$('#eventContent').dialog({modal: true});
$vars=$(“”+event.map+“”);
$srcs=$vars.children('iframe').attr('src');
$('map iframe').attr('src',$srcs);
$('#eventContent')。对话框({modal:true});
优化的解决方案,无需在隐藏div中生成iframe或其他任何内容。
就这些了,没有更多关于这个项目的细节,这就是我的建议。假设:
- 每个事件都有一个到它的映射
- 存在将启动对话框的按钮或链接
- 按钮或链接将有一个用于
iframe
<div id="eventContent" title="Event">
<div id="map"></div>
</div>
<button id="show">
Show Event
</button>
您可以收集这些信息并像这样使用:
$(".mapLink").click(function(e){
e.preventDefault();
showMap($(this).attr("href"));
});
这也可以使用
数据映射url
作为属性存储在按钮中。需要更多信息来提供完整的解决方案。如果我理解这一点,您有一个图像映射,单击时,应该会显示包含iframe
的对话框,其中源是根据单击事件中涉及的数据设置的。对吗?
<div id="eventContent" title="Event">
<div id="map"></div>
</div>
<button id="show">
Show Event
</button>
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)
});
});
<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"));
});