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

Posted

技术标签:

【中文标题】在 UI 对话框中加载 iframe 不起作用【英文标题】:Loading iframe inside UI dialog not working 【发布时间】:2017-01-25 08:56:35 【问题描述】:

我想在 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"   frameborder="0" style="border:0" allowfullscreen></iframe>

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

【问题讨论】:

需要更多信息以提供完整的解决方案。如果我理解这一点,您有一个图像映射,当单击时,它应该显示包含 iframe 的对话框,其中源是根据单击事件中涉及的数据设置的。对吗? 【参考方案1】:

如果没有关于这个项目的更多细节,这就是我的建议。假设:

每个事件都有对应的地图 存在可启动对话框的按钮或链接 按钮或链接将具有用于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 或从链接中获取它。例如,如果每个事件都有一个指向地图的链接,例如:

<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 作为属性存储在按钮中。

【讨论】:

【参考方案2】:

使用下面的代码解决您的问题。

<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"   frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<a id="showTerms" href="#">Show Terms &amp; Conditions</a>     
<script type="text/javascript">
     $(document).ready(function()
         $('#showTerms').click(function()
             jQuery('#terms').dialog(modal:true);   
         );
     );
</script>

【讨论】:

【参考方案3】:

也可以通过 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);

优化的解决方案,无需在隐藏的 div 或其他任何内容中生成 iframe。 就是这样

【讨论】:

以上是关于在 UI 对话框中加载 iframe 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

iframe 对象的点击事件不起作用

媒体查询在 iframe 中不起作用

如何使用 Jquery 在 iframe 中加载 url

jQuery UI 对话框中的 IFrame 有时不会在 Chrome 中加载内容,直到对话框被移动或调整大小(但适用于 FF 和 Edge)

登录表单自动填充,在 iframe 中,在 android 浏览器中不起作用

Youtube iframe src 自动播放在 Chrome 浏览器中不起作用