时间戳

首页 > 解决方案 > 为什么在弹出窗口中调用此代码时无法正常工作

javascript - 为什么在弹出窗口中调用此代码时无法正常工作

问题描述

我希望在我的商店产品页面中有一个图库按钮，可以打开他们想要购买的产品的图片库。唯一的问题是，由于某种原因，弹出按钮似乎无法加载到我想要显示的内容中。我知道这些弹出窗口可以正常工作，因为它可以成功加载模型的 Sketchfab iframe，如下所示。

图像

图像

现在唯一的问题是我的画廊的弹出按钮执行如下所示...

按下前图库的弹出按钮

按下后画廊的弹出按钮

通过大量测试，我发现只有在加载网页之前快速打开弹出窗口时，照片库嵌入才会起作用。尽管一旦弹出窗口关闭并重新打开，它就会再次被破坏。下面是在弹出窗口中工作的嵌入图像。

照片嵌入工作的图像

通过更多测试，我还测试了代码是否可以在我商店的产品描述中运行。在这样做的过程中，我发现它可以在产品描述中运行。见下图显示它正在工作

嵌入在产品描述中运行的图像

知道这一切，唯一的问题与嵌入的谷歌照片和弹出代码以及它们如何协同工作有关。弹出代码可在以下链接中找到。它们是由 dimsemenov 制造的。

我使用的弹出代码

我相信作为一个假设，导致此问题的问题是，这个嵌入是一个谷歌照片显示器，在与谷歌照片同步时，它需要不断地刷新和更新。我所知道的事实是我的弹出窗口的编码方式，它们在页面加载时加载并且不刷新或更新，并且仅在重新加载页面时更新。我知道这一点，因为如果我更改弹出窗口内部的代码，然后在保存更改后打开一个弹出窗口，则更改不会反映在内部，直到我刷新整个页面。虽然这么说..当我打开我的sketchfab iframe时，它确实显示加载栏，好像它正在加载sketchfab网站，我似乎无法理解这是否是问题，为什么我的照片嵌入不能做同样的事情。这只是一个假设，不确定这是否会导致问题。但是，如果是问题，是否有解决此问题的方法。下面是用于我的产品之一的嵌入谷歌照片代码。


<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
<div class="pa-carousel-widget" style="width:100%; height:480px; display:none;"
  data-link="https://photos.app.goo.gl/KvdTmPLrewaZ4VvWA"
  data-title="Shirai Ryu"
  data-description="10 new photos added to shared album">
  <object data="https://lh3.googleusercontent.com/dDpV4uY9zN6x742KmOzaE5ZxDdJlU6TVD4NnhsyTIw6vFuhzLpxDGDGal3JvvsiGDGZyi7t2eeE4RwjbfvkNyf9Av8-yDSjXXs-Xtlm9CXkytft1CJg9ZN6XwCTy7xMd0ek0qrrXKA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/G8CDlUSGKAcJwbMNyVBPM8mfd6Iq6XlFP_3ryqhrNvolSPJYNckZwpCpmTfGatMGxtImKJTkQO_tBXAzFJQ2kgDtffMA8x7Dx-bE5GF12b7JuEkyUO7KvGJq7OvLk4hxtAJ3PaD1yw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/Lt_cMOBt1Ua3bOTomjIQL4Rrldt3aGzKXvlVygFwSth5ObrkulhAhhSOnsZrgru4ac1_2ZQkAst-7NqZsyAHDnR7QHlYhptWVscK4pm5RKH22K3dZbr0eLdeU6nozBZl5jD-RfSTLQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/3Eh-1UUWg2Ny3flhQkUqbw9P8zO4_XzIfuyH0KmRNSz8JvX0pGdGYvhgs1r_LuFhPdJs9pmjAce2fyttsqLZVfC1pPtluRNPu1kmOc9VxwJnsPgXpnLdthyR1ckOmcjArDMep1VIKg=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/alnf2b0Ug47vNxihL-i_bxhV-H-o3fuHGS1F0LICzQjdejJwWF8kUPsZp0BjTKFfHhPAgPJau0khVpnTk5RaI8z1PDGO411-4BwHPTPEnAxRRhDT3MyW2IsmwxpTStCNoeS9upuiiw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/i-10hdpYEH6dZ-hAEMRUr2X-xNgFlIwK93bh0lb2Fc-9W15NFksRSEQePv3com6wUzCJt--x9rtbcLO35Ox7diPwT7lhbRKOL8-DD4KVdZDoC5BYJXbbxu-ADxAxY-T_nEUsz6Jh4A=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/Zj9I78oiH12745U5sHJteoSap9KEL8pNrUIWfwtG1YspZ9taxcMbSRn2UCY-GbxqJn5h51yZIOpb708JqBV1eQuzwSxTNfCmNB9UJqZxJfehCgJ2Uo4RfF-RVctGxC4yrie93necMQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/1NNepe283WSYo_8pJX5sloiwcEy2uE8MMGi4V_bLHoMV-By19oX4XTmt6sVHFYyt7-2M3LInsXmyZmQ0RlQst3kiQmt2_fNU9cljFxJdPHJwYVr0NRY1aGsg0ky7H0RQ3YTfir8lSQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/7eoT9bKBkDDndxTHD6hDTydt9cd2G_Rl40Yy_r3m_PvQ8GB7w5lPLRQ7da8zNy4u2nU0UFgc2LSrSlO6o4qdAN6UmEkz7CsJ8lO-zVl_L5-bfSye3tItl0U4x1VBnV2yXEspbAxOBQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/uPt0BhapfibUCEaEg2X0Quk1C5cvCFYYst10CHcTNDb-NWlmr4rdt7aADO8jrQLrPONVb0vf8nMHxnhxcjmtd5NQlFESyacuifQTTexhHyh8N3RWDtCOP5xZNpl8t4cga8UcQpbRlg=w1920-h1080"></object>
</div>

如果有帮助，这里有更多代码，它只是显示了我在弹出窗口中放置嵌入的位置。根据我的产品描述，它被称为 {{ description_arr 1 }}。我正在为我的弹出窗口使用 Magnific Popup。


<div id="Image-Gallery" class="mfp-hide">


  <div class="row">
  <div class="gallerycolumn"></div>
  <div class="gallerycolumn"></div>
</div>


  <div class="row">
  <div class="galleryleft" style="background-color:#000000;"> 

 {{ description_arr[1] }}    





  </div>
  <div class="galleryright" style="background-color:#000000;">
    <div class="acerill-custom-form" data-form-id="ca3d163c-517f-4dda-8e8c-202a1cb2e3dc"></div>
<script type="text/javascript" src="https://custom-forms-client.acerill.com/js/custom-forms-v2.js"></script>
  </div>
</div>

</div>


<style>
#image-gallery {
  border: 0px #555 solid;
  background-color: #ffffff;

  max-width: auto;
  margin-left: auto;
  margin-right: auto;


}
</style>

我非常感谢所有的支持。

亲切的问候

尼古拉斯·穆尔达卡

标签： javascripthtmlcssiframeshopify

解决方案

推荐阅读