Javascript 为什么在弹出窗口中调用此代码时无法工作

Javascript 为什么在弹出窗口中调用此代码时无法工作,javascript,html,css,iframe,shopify,Javascript,Html,Css,Iframe,Shopify,我想在我的商店产品页面上有一个图库按钮,可以打开他们想要购买的产品的图片库。唯一的问题是,由于某些原因,弹出按钮似乎无法加载我想要显示的内容。我知道这些弹出窗口可以工作,因为它可以成功地加载sketchfab iFrame中的模型,如下所示 现在唯一的问题是“我的画廊”的弹出按钮执行以下操作 通过大量测试,我发现只有在网页加载之前快速打开弹出窗口,照片库嵌入才会起作用。虽然这是真的,一旦弹出窗口关闭并重新打开,它就会再次被破坏。下面是在弹出窗口中嵌入工作的图像 通过更多的测试,我还测试

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

现在唯一的问题是“我的画廊”的弹出按钮执行以下操作

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

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

知道了所有这些,唯一的问题就是谷歌照片的嵌入、弹出代码以及它们如何协同工作。弹出代码可在以下链接中找到。它们是迪姆塞门诺夫制造的

我相信作为一个假设,导致这一问题的原因是,这个嵌入式是一个谷歌照片显示器,它需要不断刷新和更新,因为它与谷歌照片同步。事实上,我所知道的是我的弹出窗口的编码方式,它们在页面加载时被加载,不会刷新或更新,只有在页面重新加载时才会更新。我知道这一点,因为如果我在弹出窗口中更改代码,然后在保存更改后打开弹出窗口,在刷新整个页面之前,更改不会反映在弹出窗口中。尽管如此。。当我打开我的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}}。我正在使用放大弹出窗口作为我的弹出窗口


<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>


{{description_arr[1]}
#图像库{
边框:0px#555实心;
背景色:#ffffff;
最大宽度:自动;
左边距:自动;
右边距:自动;
}
我非常感谢大家的支持

问候


Nicolas Murdaca

我强烈建议您编写一个工作片段来说明这个问题,以使调试更容易。我认为在片段中包含它不会有帮助。我已经知道弹出窗口不是问题,它工作得非常好。这是一个非常复杂的弹出窗口,有“很多”运行它的代码,并且已经安装到我的商店中。在不同的地方,你可以通过查找放大的弹出窗口在线找到这个弹出窗口的代码。我还知道,我调用代码的策略(比如sketchfab iframe)也能成功运行,这意味着没有任何问题。我使用完全相同的方法来做这两个弹出窗口。我的sketchfab iframe似乎可以工作,所以代码没有问题。唯一的问题是嵌入的谷歌照片,以及它的代码在弹出窗口中的作用。我假设它与弹出窗口的功能方式有关,以及它与普通网页的区别。如果我把谷歌照片嵌入到一个网页上,效果会很好,但一旦进入弹出窗口就不起作用了。我更新了上面的帖子…从来没有找到这个问题的答案,但我通过使用不同的网站找到了解决方案。只要使用这个网站制作你的所有相册,它们就会工作。