2016-01-28 3 views
0

Я добавляю баннеры Amazon Affiliate на мой сайт, но поскольку код баннера не реагирует, баннеры большего размера выходят из моего контейнера меньшими размерами. Я создал следующий код, чтобы при загрузке страницы он загрузил баннер соответствующего размера в правильном пространстве. Тем не менее, я хотел бы установить его так, чтобы при изменении размера окна браузера DIV, содержащий код баннера (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> 
+0

Оберните свой контент, где у вас есть условия записи в функции, и вызовите ту же функцию на 'resize' – Rayon

+1

, вам также необходимо повторно добавить тег сценария amazon после обновления глобальных конфигурационных параметров. – dandavis

+0

Если вы в состоянии предоставить фактические обновления кода, которые вы рекомендовали бы, я очень благодарен за помощь. – samuelayres

ответ

0

Найдено что-то связано с Amazon баннеров здесь: Amazon Associates Site

+0

Реагирующие баннеры недоступны для категории, которую мне нужно отображать.Я пишу этот код, чтобы создать фальшивую отзывчивость с помощью моих блоков баннеров. – samuelayres

0

у меня нет опыта работы с этой конкретной библиотеки, но я поделюсь некоторыми мыслями, просто глядя на код:

  • В документах указано, что числовые переменные должны быть строками или цифрами? (amzn_assoc_width, amzn_assoc_height и т. Д.). Обычно, число должно быть без кавычек (amzn_assoc_width = 234 вместо amzn_assoc_width = '234')
  • Возьмите lrgBanner, medBanner и smlBanner функции OUT функции loadBanners. Вы определили их внутри. loadBanners будет хорошо работать с ними на улице.
  • Поскольку вы определяете переменные внутри функций, они не могут быть установлены, если сценарий Amazon может их видеть (глобальное пространство). В браузере, после загрузки страницы, откройте консоль браузера и введите имя любой из переменных в консоли, и она выведет любую переменную. Если он выводит undefined, либо вы делаете что-то неправильно в консоли, либо переменные не устанавливаются в глобальном пространстве. Кроме того, попробуйте ввести window.variableName в консоли, чтобы дважды проверить.
  • В связи с предыдущей маркой попробуйте указать все определения переменных в ваших функциях с помощью window., чтобы явно установить их в глобальном пространстве, где, вероятно, ожидается, что сценарий Amazon их найдет.
0

Если вы не можете использовать гибкие баннеры для своей категории, попробуйте просто динамически загружать баннеры, используя баннеры 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 для начальной загрузки помогает предотвратить баннер от изменения во время загрузки страницы.

Надеюсь, что это поможет!

Смежные вопросы