javascript - 打开弹出窗口时如何刷新页面/弹出内容？

Question

我最近遇到了一个大问题，试图让照片库在弹出窗口中工作。我之前在以下链接中发布了有关此问题的问题，但没有人能够帮助解决该问题。

https://community.shopify.com/c/Shopify-Discussion/Why-does-this-code-fail-to-work-when-being-call ...

请查看链接以更好地了解我遇到的问题。

因此，首先，我使用的是连接到谷歌相册的谷歌照片嵌入。我计划将它用于我的所有产品，并允许人们在那里提交自己的产品图像，并将这些图像添加到照片库中供其他客户查看。唯一的问题是嵌入的谷歌照片无法正常工作。如我之前的问题所示，在弹出窗口中打开时嵌入的谷歌照片已损坏，弹出窗口唯一有效的时间是我在“页面完成加载之前”快速打开弹出窗口时。下面是弹出功能如何工作的示例图像。

打开前弹出...

弹出窗口打开但不工作...

弹出窗口打开并工作（仅在页面完成加载之前快速打开时）

虽然这是真的，一旦我关闭弹出窗口并再次打开它，弹出窗口又被打破了。这使我知道，如果在有人打开弹出窗口的命令下完全刷新所有内容并且在不关闭弹出窗口的情况下刷新所有内容，我应该能够使这个弹出照片库工作。

以下是用于我的弹出窗口的代码......我正在使用由 Dmitry Semenov 制作的 magnific popup

html弹出按钮代码

<a class="btn size-chart-open-popup" href="#Image-Gallery">See Image Gallery</a>


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



<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/fdDmX5CQnCpPkrm98"
  data-title="Greek Key Ring"
  data-description="13 new photos added to shared album">
  <object data="https://lh3.googleusercontent.com/0qLN_Xu5BgFic25TVrUA-SVNOFM6QW2llhbiLySb7bbWTs-3pYwZi0OLelVcj17qr6rHlUn1Rt4e4f3sT5g3mZjqu2j2ta2waz2LUL9Nu9s7RURpREMbmDiYMb6u6kUMKwWq7i6VNA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/zSn5SD3eiBIVbFoWnIYJfythDg-YdqvZRwUcKCO_0A5jerwYWUf2QvP0IANQwpUt75xLWiWw6Is8uiIDmwD_y6tXPs7aSaMCfcZSOCVP-PtkZoQbDugp7AszENZyN--c3wBhGO7pjA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/Y7lISOdW_2v6VKE0F_XebMEUk8NHwxbP9tn1tJ8p7BcJ__EY0MnN0D_lETofiawnbCwkashQfYzsamKHTY3758sPqAUU3pw6m8JvmWQzO9sBLnqRsxUKW-ayN2qoUVYKM1uhm37XPA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/wP7Hll5v4JkG9Yx91t8A0pGoz1wbJKdWl3M92dhPM9CMdF-_akiYWZVBaLA1SqzFQ8d3sw65mmPwPy-jK8fJ2hqIxiBf1bXjOdHXuV6JK8bAikkyUEF6_1BTZd45OcS05atsGgAiFw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/OEBngfjcxmFqR_lxkt5beaWwZoHUc2OiEei_Kx7d9ZCR3RjQUZfr2pGMsuvRwKOiVTyxMYmpaQZnL90yRHW2K7DMrcTFVn3XI_vu_x6N9AHmnhFAUW44CyILj_jaWQGd_-Tuc8Lo3Q=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/K6ki8d0DUnqjM81A4DKmxroDgBhLTCvkqjNM9d-FuDh1sIKoc7Tg0DUP2LSLToXXVwd4On9lP5aewYvDFexOWh_w36ViVMPBy4a_BfpISDwYl10mvnlBYwhEGyaCXcS4OvgIQ_SRJw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/q0eMcSq0N86KVHDd9HRBNFzblmX8Fq77-uhKJnClTd7fEvGozbQztgKn9FMUvKGHwv1DhLz2_0Bi5w7qPQqja9Bi9xfrvJ-Eg2WELOifqdDkMWCuMG9NGKtAwCSlTnWB38tgaHTilQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/ocEey_fcol42_CR4XoCDJ6vMPKFW00nb8doIVjJ2GSE-grOjZwL026GWkWT9yGVvpwhy4i4C8Scg6x1NWuJKvzZJF_6vGZBPBgAV0xCPeDqmfOZdd86Wwi4boDoFBJsOfmfL3DOSmQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/wJmh9xRpfKnRRgQUGoHPZTwlAo9Nagmuh7LMuYLALNp6ltA3T7OaWrjCTx8mV012MryBZJ-_sBb-aecvfpUeZDELPVHGNnN4-52bwZzSLjcMqBcHqSnEsz_hobP9NimsWxblooxmgQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/Dik1vkHNm7XZzV4dZCJI7uBOUzr3cQm9RfiEzOwYBMqy26kVitK2nePTqI0_iL_h1w5rA9TSxFjavjiypS6Wu5dcU5MDyTC8Z1Ecv_M__EDB_4v5xxrqhku4N678PvB_3P9Wbifqcg=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/J9lLLYULC_2hJPY0dKjtdYZabUAw9HbCfV023smdOYCQO3WcevDqPp9xfOgSVbXg0Th62SOdgWszfhJBHWG6u_M9L_IF4vbaQ4iiH0mbOABOrwEXhTD4KuaHYAZcpnRbFeWevu58yw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/e216NxNB6I8a9qcjhxUXc7INo5hk-m6MHER9ml2zuG37L00DlibNreOJwLg2suJFh1zpNJn0fC8IYRyxkgirxA_vFUjiMjTcG3xW29vZ1v-Mi-m3dNpS_wK_XJi63ncNhkbrp2raBA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/KbA0w_-CJ9Rtzi4X3NXLCUJCtMGjG8F8eUB15MbIRpByjPhFWguyl3yPwTh3JJYsY5eeCWlMnhYUQ-v1_VN63KDT90A_dvMztRqPliPxepJFhOU6z9Na11OrXVxVyBBTKdzi30vF0A=w1920-h1080"></object>
</div>



    

  </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>
  
      .gallerycolumn {
  float: left;
}

.galleryleft {
  width: 75%;
  float: left;
}

.galleryright {
  width: 25%;
  float: right;
}
  

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

  max-width: auto;
  margin-left: auto;
  margin-right: auto;
  
  
}
</style>



<style>

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="galleryright"] {
    width: 100%;
    float: none;
  }
  
  [class*="galleryleft"] {
    width: 100%;
    float: none;
  }
  
}
  
</style>

我无法在此网站上使用该按钮，因为我不知道如何将其组合在一起，因为我的商店代码中的许多其他代码被调用并用于创建代码。此外，代码的 JS 太大，无法放在这里。我只想知道如何仅在打开弹出窗口时刷新网页（所有弹出数据），并且在刷新页面时保持弹出窗口打开而不关闭它。我相信这将解决我的问题，但如果有其他方法可以解决此问题，请提供答案。非常感谢您的帮助

亲切的问候

标签： javascriptjqueryhtmlshopifystore