javascript - 即时加载 Amazon MP3 小部件

Question

我在让它发挥作用方面经历了一段非常令人沮丧的时间。我想动态加载/更新亚马逊 mp3 小部件。

Amazon 提供了两个脚本来包含在小部件的预期目标位置 ( https://widgets.amazon.com/Widget-Source/ )。我想在点击事件上用新的小部件替换该小部件。

我尝试使用 jQuery 的 html() 和appendTo() 将脚本作为字符串插入到 DOM 元素中。我知道注入(inject)在某种程度上有效，因为我收到了添加到其末尾的测试警报。

我尝试过使用这里推荐的createElement():Can't append <script> element 。同样，alert() 被触发，但没有出现任何小部件。

我发现有人在这里处理同样的问题:Is it possible to programmatically add Amazon MP3 widgets 。我充满希望，因为它有一个被接受的答案，但我仍然不明白它将如何帮助将新的小部件引入 DOM。

<script type='text/javascript'>
var amzn_wdgt={widget:'MP3Clips'};
amzn_wdgt.tag='widgetsamazon-20';
amzn_wdgt.widgetType='ASINList';
amzn_wdgt.ASIN='B0011Z0YR2,B00137W4P8,B0013G0PG4,B001AU8ZLK,B001AUCJZ8,B001AUEMDK,B001AU8YB6,B001AU8YBQ,B001AU8YCK,B001AUCK2U,B001AUEMFS,B001AUCK52,B001AU6XE6,B001AUEMH6';
amzn_wdgt.title='What I\'ve been listening to lately...';
amzn_wdgt.width='250';
amzn_wdgt.height='250';
amzn_wdgt.shuffleTracks='True';
amzn_wdgt.marketPlace='US';
</script>
<script type='text/javascript' src='http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js'>

谢谢。

Answer 1

你可以试试这个。您将设置 amzn_wdgt 的属性，然后当有人单击您的元素时，它将加载脚本并对已设置的对象执行所需的任何操作。

<script>
var amzn_wdgt={widget:'MP3Clips'};
amzn_wdgt.tag='widgetsamazon-20';
amzn_wdgt.widgetType='ASINList';
amzn_wdgt.ASIN='B0011Z0YR2,B00137W4P8,B0013G0PG4,B001AU8ZLK,B001AUCJZ8,B001AUEMDK,B001AU8YB6,B001AU8YBQ,B001AU8YCK,B001AUCK2U,B001AUEMFS,B001AUCK52,B001AU6XE6,B001AUEMH6';
amzn_wdgt.title='What I\'ve been listening to lately...';
amzn_wdgt.width='250';
amzn_wdgt.height='250';
amzn_wdgt.shuffleTracks='True';
amzn_wdgt.marketPlace='US';

$('.clickMe').click(function(e){
    e.preventDefault();
    if(typeof amzn_wdgt != 'undefined'){
        $.getScript('http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js');
    }
});
</script>