Question

我创建了简单的jquery移动网站，点击按钮，弹出窗口加载带有视频的iframe。

我的问题是视频在关闭弹出窗口后继续播放。

我该如何避免这种情况？

Jquery移动文档说这会发生，我应该听 popupafterclose 事件。 http://demos.jquerymobile.com/1.2.0/docs/pages/popup/popup-iframes.html

但我怎么能这样做，有人可以让我成为榜样吗？

HTML：

<!-- BUTTONS -->
  <a href="#testing" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-btn-icon-left ui-icon-info">Open Iframe Popup1</a>
  <a href="#testing2" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-btn-icon-left ui-icon-info">Open Iframe Popup2</a>

<!--POPUPS-->
<div data-role="popup" id="testing" data-theme="b" data-tolerance="15,15">
  <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
  <div data-role="header">
    <h1>blablabla</h1>
  </div>
  <iframe src="http://player.vimeo.com/video/110823244" width="520" height="360" scrolling="no" seamless="seamless"></iframe>
</div>
<div data-role="popup" id="testing2" data-theme="b" data-tolerance="15,15">
  <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
  <div data-role="header">
    <h1>blablabla</h1>
  </div>
  <iframe src="http://player.vimeo.com/video/110823244" width="520" height="360" scrolling="no" seamless="seamless"></iframe>
</div>

请注意，popup div id总是在变化所以我不能只是调用一些javascript来杀掉＃testing2。

我赞美你的帮助！问候中号

Answer 1

你应该尝试这样的事情：

$("#testing").bind({
   popupafterclose: function(event, ui) {
     $(this).find('iframe').remove();
   }
});

Answer 2

对于弹出式div，您可以使用jQuery选择器'[data-role="popup"]'。要捕获popupafterclose事件，请从文档中委派它，以便任何动态创建的弹出窗口都会触发事件：

$(document).on( "popupafterclose", '[data-role="popup"]',  function( event, ui ) {
    $(this).find("iframe").prop("src", "");
});

在事件处理程序中，找到iframe元素并将其src prop设置为空字符串。

<强> DEMO

弹出关闭Jquery mobile后删除iframe

2 个答案: