Question

我将亚马逊会员横幅添加到我的网站，但由于横幅代码没有响应，较大尺寸的横幅以较小的尺寸突破了我的容器。我创建了以下代码，以便在页面最初加载时，它将在正确的空间中加载适当大小的横幅。但是，我想设置它，以便在调整浏览器窗口大小时，刷新包含横幅代码（bannerdiv）的DIV并重新执行脚本。

我是这样的新手，所以您的耐心和愚蠢的简单说明将不胜感激。我也确定这段代码是以一种痛苦的笨重方式编写的。 注意：我已在评论中更新了每条建议的代码，但它仍无效。有什么建议吗？

<script type='text/javascript'>
function loadBanners() {
function lrgBanner() {
 amzn_assoc_ad_type = 'banner';
 amzn_assoc_tracking_id = 'livcouintheci-20';
 amzn_assoc_marketplace = 'amazon';
 amzn_assoc_region = 'US';
 amzn_assoc_placement = 'assoc_banner_placement_default';
 amzn_assoc_linkid = 'AC2XN3SJ34RJMGYK';
 amzn_assoc_campaigns = 'outdoorrecreation';
 amzn_assoc_p = '48';
 amzn_assoc_banner_type = 'category';
 amzn_assoc_isresponsive = 'false';
 amzn_assoc_banner_id = '1XTRE8BRWXGWQJTWPJ82';
 amzn_assoc_width = '728';
 amzn_assoc_height = '90';
}
function medBanner() {
 amzn_assoc_ad_type = 'banner';
 amzn_assoc_tracking_id = 'livcouintheci-20';
 amzn_assoc_marketplace = 'amazon';
 amzn_assoc_region = 'US';
 amzn_assoc_placement = 'assoc_banner_placement_default';
 amzn_assoc_linkid = 'OTLU2UB6UY5JMUHP';
 amzn_assoc_campaigns = 'outdoorrecreation';
 amzn_assoc_p = '26';
 amzn_assoc_banner_type = 'category';
 amzn_assoc_isresponsive = 'false';
 amzn_assoc_banner_id = '0CDY3FGJ2PD68NJXFKG2';
 amzn_assoc_width = '468';
 amzn_assoc_height = '60';
}
function smlBanner() {
 amzn_assoc_ad_type = 'banner';
 amzn_assoc_tracking_id = 'livcouintheci-20';
 amzn_assoc_marketplace = 'amazon';
 amzn_assoc_region = 'US';
 amzn_assoc_placement = 'assoc_banner_placement_default';
 amzn_assoc_linkid = 'G7YQZ5D43772NXLC';
 amzn_assoc_campaigns = 'outdoorrecreation';
 amzn_assoc_p = '42';
 amzn_assoc_banner_type = 'category';
 amzn_assoc_isresponsive = 'false';
 amzn_assoc_banner_id = '1VHGPZ2J9GDJGYKD5G82';
 amzn_assoc_width = '234';
 amzn_assoc_height = '60';
}
    var winwidth = window.innerWidth;
    if (winwidth >= 1200) {
        lrgBanner();
    } else if (winwidth < 980 && winwidth >= 920) {
        lrgBanner();
    } else if (winwidth >=980 && winwidth < 1200) {
        medBanner();
    } else if (winwidth >= 600 && winwidth < 920) {
        medBanner();
    } else {
        smlBanner();
    }
}
loadBanners();
</script>

<div id="bannerdiv">
    <script id="bannerscript" src='//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1'></script>
</div>

<script type="text/javascript">
function amznScript() {
    var banDiv = document.getElementById('bannerdiv');
    var oldScript = document.getElementById('bannerscript');
    var newScript = document.createElement('script')
    newScript.type = 'text/javascript';
    newScript.src = '//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1';
    newScript.id = 'bannerscript'
    banDiv.replaceChild(newScript,oldScript);
}
</script>

<script type="text/javascript">
function adBanner() {
    loadBanners();
    amznScript();
}
window.addEventListener("resize", adBanner);
</script>

Answer 1

在此处找到与亚马逊横幅相关的内容： Amazon Associates Site

Answer 2

我没有这个特定图书馆的经验，但我会分享一些只看你代码的想法：

文档是否说数字变量设置需要是字符串还是数字？（amzn_assoc_width，amzn_assoc_height等）。通常，数字应该没有引号（amzn_assoc_width = 234而不是amzn_assoc_width = '234'）
执行lrgBanner功能的medBanner，smlBanner和loadBanners功能。你在里面定义了它们。 loadBanners可以在外面与他们合作。
因为您正在定义函数内部的变量，所以它们可能无法在Amazon脚本可以看到的位置（全局空间）进行设置。在浏览器中，在页面加载后，打开浏览器控制台并在控制台中键入任何变量的名称，它将输出设置的变量。如果它输出undefined，则表示您在控制台中执行了错误操作，或者未在全局空间中设置变量。另外，尝试在控制台中键入window.variableName以进行仔细检查。
与上一个项目符号相关，尝试使用window.为函数中的所有变量定义添加前缀，以便在全局空间中明确设置它们，这是亚马逊脚本可能希望找到它们的地方。

Answer 3

如果您无法为自己的类别使用自适应横幅广告，请尝试使用iframe横幅动态加载横幅广告。这是使用jQuery

的一个例子

<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script language="javascript">
$(window).on('load resize', function() {
    winWidth = $(window).width();
    if ( winWidth >= 1200) {
        $('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=48&l=ur1&category=home&banner=1T8X6QB60F8G26A33RG2&f=ifr&linkID=WHAOQICV37C7EWOX','width':'728','height':'90'})
    } else if (winWidth >= 600 && winWidth < 1200) {
        $('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=26&l=ur1&category=home&banner=017THAMGVS89AQ891982&f=ifr&linkID=5ORSSCSEHTUJ6JZS','width':'468','height':'60'})
    } else {
        $('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=42&l=ur1&category=home&banner=1VCFP7EH9H4CBCD6ADR2&f=ifr&linkID=IHZPNRGMTYWEIYAS','width':'234','height':'60'})
    }
});
</script>
</head>

<body>
<iframe id="myBanner" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</body>

使用空白iframe进行初始加载有助于防止横幅在页面加载时更改。

希望有所帮助！

直接重新加载/刷新窗口大小调整大小使用

3 个答案: