在加载亚马逊小部件后执行代码
[英]execute code after Amazon widgets are loaded
问题描述
I'd like to load a couple of Amazon widgets with different search terms and highlight some results.
我想加载几个具有不同搜索词的亚马逊小部件并突出显示一些结果。
The problem is, how can I know when both widgets are loaded?问题是，我怎么知道两个小部件何时加载？ I've tried many different snippets (with load, ready, etc...) I've found here and there, but without success.我已经尝试了许多不同的片段（加载、就绪等），我在这里和那里找到了，但没有成功。
Basically, when loaded, each widget's content is within an "ad unit" DIV (..._adunit_0 and..._adunit_1), which contains another DIV, and inside that one there's an IFRAME.基本上，加载时，每个小部件的内容都在一个“广告单元”DIV（..._adunit_0 和..._adunit_1）中，其中包含另一个 DIV，在该 DIV 内部有一个 IFRAME。 Both DIVs have IDs, but no the IFRAMEs, in case that matters.两个 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>
Here's the code that loads the 2 widgets: https://jsfiddle.net/rz8ytfxd/这是加载 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>
Any help would be greatly appreciated.任何帮助将不胜感激。 I don't mind if a solution requires jQuery or any other library.我不介意解决方案是否需要 jQuery 或任何其他库。
Michael迈克尔
[I'll probably post another question just for that, but just in case... Do you have any idea why the spaces in the search term are replaced with %20 (thus giving bad results) despite it being the code exactly as copied from Amazon? [我可能会为此发布另一个问题，但以防万一......你知道为什么搜索词中的空格被替换为 %20 （从而给出糟糕的结果），尽管它是完全复制的代码来自亚马逊？ Can something be done about that?]可以做点什么吗？]
1 个解决方案
解决方案1
0 2021-03-24 09:55:41
The simplest solution is to regularly check the number of loaded items.最简单的解决方案是定期检查已加载项目的数量。 If you expect n iframes to be loaded, then you can do this:如果您希望加载 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);
}
Maybe Amazon has some nice features for having a callback.也许亚马逊有一些很好的回调功能。 I recommend reading the documentation for this possibility.我建议阅读文档以了解这种可能性。
You can also track DOM changes, but that's a more complex approach.您还可以跟踪 DOM 更改，但这是一种更复杂的方法。
Detect changes in the DOM 检测 DOM 中的变化
As about the %20: let's look at the src attribute of your URL:至于 %20: 让我们看看你的 URL 的src属性：
https://ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&MarketPlace=DE&Operation=GetWidgetFrame&OneJS=1&ad_type=responsive_search_widget®ion=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
you will see that the stuff you do not really need is already in the iframe , and replacing the src to您会看到您并不真正需要的东西已经在iframe中，并将src替换为
https://ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&MarketPlace=DE&Operation=GetWidgetFrame&OneJS=1&ad_type=responsive_search_widget®ion=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 planet 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
in the Dev tools would fix the problem for that specific page load.在开发工具中将解决该特定页面加载的问题。 I do not know what is causing that though, however, you are not the only one having that problem: Amazon Search Widget fails for spaces in search term我不知道是什么原因造成的，但是，你不是唯一一个遇到这个问题的人： Amazon Search Widget failed for spaces in search term
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.