如何停止在 Javascript (WooCommerce) 的模型弹出窗口中嵌入视频? [英] How to stop embed video in Model Popup in Javascript (WooCommerce)?

查看：87 发布时间：2021/6/3 18:54:17 javascript php wordpress model popup

本文介绍了如何停止在 Javascript (WooCommerce) 的模型弹出窗口中嵌入视频?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新

我使用 javascript 创建了一个弹出窗口，它运行良好.问题是我在模型中使用 iframe 嵌入视频代码(Facebook).模型工作正常，按下十字按钮后，弹出窗口就会出现.但问题是使用时打开弹出窗口并播放视频，然后按十字按钮视频继续播放.视频必须在按下十字按钮时停止.弹出窗口正在消失，但视频在后台播放.另一个问题是 FEATURED VIDEO BUTTON 出现在所有产品上，我想应用一个条件，该条件仅在从后端添加嵌入代码时才会显示按钮，请指导我如何操作.

HTML 代码(我在 short-discription.php 中的简短描述后添加了此代码)


 解决方案 
如果没有第三方提供的 API，例如 Facebook，就无法通过不同域上的 iframe 以编程方式进行通信.因此，在打开和关闭模态时创建和销毁 iframe 会更容易.
从 HTML 中删除 iframe.将 iframe 的 src 移动到模态元素并将值存储在 data 属性中.这使您可以在创建 iframe 时随时使用该属性的值.
<div class="modal__overlay jsOverlay"></div><div class="modal__container"><button class="modal__close jsModalClose">&#10005;</button>

在您的 JavaScript 中创建一个函数，该函数使用您当前在 HTML 中拥有的 src 和属性构造一个 iframe 元素.每当打开模态时都必须调用此函数.所以它应该在 openModal 函数中的 onclick 事件处理程序中调用.将 iframe 附加到 modal__container 元素并打开模态.

同样适用于 closeModal 函数，您应该从 HTML 中删除 iframe 元素以阻止视频在后台播放，这将解决您的问题.

结合 iframe 的创建，您现在可以在打开和关闭模式时启动和停止 iframe 视频.

/* 本脚本支持 IE9+ */(功能() {函数 createIframe(src) {if (typeof src !== 'string') {throw Error('src 参数必须是一个有效的字符串');}var iframe = document.createElement('iframe');iframe.src = src;iframe.width = 560;iframe.height = 308;iframe.setAttribute('滚动', '否');iframe.setAttribute('frameBorder', 0);iframe.setAttribute('allowTransparency', 'true');iframe.setAttribute('allowFullscreen', 'true');iframe.style.border = '无';iframe.style.overflow = '隐藏';返回 iframe；}/* 打开模态窗口函数 */函数 openModal() {/* 获取触发元素 */var modalTrigger = document.getElementsByClassName('jsModalTrigger');/* 为所有触发元素设置 onclick 事件处理程序 */for(var i = 0; i < modalTrigger.length; i++) {modalTrigger[i].onclick = function() {var target = this.getAttribute('href').substr(1);var modalWindow = document.getElementById(target);var source = modalWindow.getAttribute('data-src');var iframe = createIframe(source);var modalContainer = this.lastElementChild;modalContainer.appendChild(iframe);modalWindow.classList ?modalWindow.classList.add('open') : modalWindow.className += ' ' + 'open';}}}函数 closeModal(){/* 获取关闭按钮 */var closeButton = document.getElementsByClassName('jsModalClose');var closeOverlay = document.getElementsByClassName('jsOverlay');/* 为关闭按钮设置 onclick 事件处理程序 */for(var i = 0; i < closeButton.length; i++) {closeButton[i].onclick = function() {var modalContainer = this.parentNode;var modalWindow = modalContainer.parentNode;modalContainer.removeChild(modalContainer.firstElementChild);modalWindow.classList ?modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|')+ '(\\b|$)', 'gi'), ' ');}}/* 为模态叠加设置 onclick 事件处理程序 */for(var i = 0; i < closeOverlay.length; i++) {closeOverlay[i].onclick = function() {var modalWindow = this.parentNode;modalWindow.classList ?modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|')+ '(\\b|$)', 'gi'), ' ');}}}/* 处理 domready 事件 IE9+ */功能就绪(fn){if (document.readyState != 'loading'){fn();} 别的 {document.addEventListener('DOMContentLoaded', fn);}}/* dom 就绪后触发模态窗口函数 */准备好(openModal)；准备好(关闭模态)；}());