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

问题描述

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

问题是，我怎么知道何时加载了两个小部件？我尝试了许多不同的片段（带负载、准备就绪等...）我在这里和那里都找到了，但都没有成功。

基本上，当加载时，每个小部件的内容都位于一个“广告单元”DIV（..._adunit_0 和..._adunit_1）中，该 DIV 包含另一个 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（从而给出不好的结果），尽管它是代码完全是从亚马逊复制的？可以做些什么吗？]

解决方法

最简单的解决方案是定期检查已加载项目的数量。如果您希望加载 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：让我们看看您网址的 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

iframe iframe javascript widget