在加载亚马逊小部件后执行代码答案

【问题标题】：execute code after Amazon widgets are loaded在加载亚马逊小部件后执行代码
【发布时间】：2021-03-24 17:55:41
【问题描述】：

我想加载几个具有不同搜索词的亚马逊小部件并突出显示一些结果。

问题是，我怎么知道两个小部件何时加载？我尝试了许多不同的 sn-ps（加载、就绪等），我到处都找到了，但都没有成功。

基本上，加载时，每个小部件的内容都在一个“广告单元”DIV（..._adunit_0 和 ..._adunit_1）中，其中包含另一个 DIV，在该 DIV 内部有一个 IFRAME。两个 DIV 都有 ID，但没有 IFRAME，以防万一。

<div id="amzn_assoc_ad_div_adunit_0">
  <div id="__mobileAssociatesSearchWidget_adunit_0" class="__mobile-associates-search-widget">
    <iframe>search results</iframe>
  </div>
</div>

这是加载 2 个小部件的代码：https://jsfiddle.net/rz8ytfxd/

<html>
  <body>

    <script type='text/javascript'>
      amzn_assoc_ad_type = 'responsive_search_widget';
      amzn_assoc_tracking_id = '';
      amzn_assoc_marketplace = 'amazon';
      amzn_assoc_region = 'DE';
      amzn_assoc_placement = '';
      amzn_assoc_search_type = 'search_widget';
      amzn_assoc_width = 'auto';
      amzn_assoc_height = 'auto';
      amzn_assoc_default_search_category = '';
      amzn_assoc_default_search_key = 'lonely planet ukraine'
      amzn_assoc_theme = 'light';
      amzn_assoc_bg_color = 'FFFFFF';

    </script>
    <script src='//z-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=DE'></script>

    <script type='text/javascript'>
      amzn_assoc_ad_type = 'responsive_search_widget';
      amzn_assoc_tracking_id = '';
      amzn_assoc_marketplace = 'amazon';
      amzn_assoc_region = 'DE';
      amzn_assoc_placement = '';
      amzn_assoc_search_type = 'search_widget';
      amzn_assoc_width = 'auto';
      amzn_assoc_height = 'auto';
      amzn_assoc_default_search_category = '';
      amzn_assoc_default_search_key = 'lonely planet poland'
      amzn_assoc_theme = 'light';
      amzn_assoc_bg_color = 'FFFFFF';

    </script>
    <script src='//z-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=DE'></script>
    </body>
</html>

任何帮助将不胜感激。我不介意解决方案是否需要 jQuery 或任何其他库。

迈克尔

[我可能会为此发布另一个问题，但以防万一......你知道为什么搜索词中的空格被替换为 %20 （从而给出糟糕的结果），尽管它是代码和亚马逊复制的一样吗？可以做点什么吗？]

【问题讨论】：

标签： javascript iframe widget onload

【解决方案1】：

最简单的解决方案是定期检查已加载项目的数量。如果您希望加载 n 个 iframe，那么您可以这样做：

function waitForNIFrames(callback, n) {
    let myInterval = setInterval(function() {
        if (document.querySelectorAll("iframe") >= n) {
            clearInterval(myInterval);
            callback(); //This is the function you want to execute when it's done.
        }
    }, 100);
}

也许亚马逊有一些很好的回调功能。我建议阅读有关这种可能性的文档。

您还可以跟踪 DOM 更改，但这是一种更复杂的方法。

Detect changes in the DOM

关于 %20：让我们看看你的 URL 的 src 属性：

https://ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&MarketPlace=DE&Operation=GetWidgetFrame&OneJS=1&ad_type=responsive_search_widget&region=DE&marketplace=amazon&tracking_id=&auto_complete=true&org_reco_count=0&axf_treatment=&search_type=search_widget&linkid=&width=693&height=252&default_search_category=&default_search_key=**lonely%2520planet%2520ukraine**&widgetId=__mobileAssociatesSearchWidget_adunit_0&default_category_html=&default_category_value=&default_category_search=&isresponsive=true&theme=light&bg_color=FFFFFF&slotNum=0&debug=&viewerCountry=RO

你会看到你并不真正需要的东西已经在iframe中了，把src替换成

https://ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&MarketPlace=DE&Operation=GetWidgetFrame&OneJS=1&ad_type=responsive_search_widget&region=DE&marketplace=amazon&tracking_id=&auto_complete=true&org_reco_count=0&axf_treatment=&search_type=search_widget&linkid=&width=685&height=252&default_search_category=&default_search_key=lonely 行星 ukraine&widgetId=__mobileAssociatesSearchWidget_adunit_0&default_category_html=&default_category_value=&default_category_search=&isresponsive=true&theme=light&bg_color=FFFFFF&slotNum=0&debug=&viewerCountry=RO

在开发工具中将解决该特定页面加载的问题。我不知道是什么原因造成的，但是，你不是唯一一个遇到这个问题的人：Amazon Search Widget fails for spaces in search term

【讨论】：