直接使用窗口大小調整中的DIV內容的重新加載/刷新
[英]Straight Reload/Refresh of DIV Contents on Window Resize Using
問題描述
我正在向網站添加Amazon Affiliate橫幅，但是由於橫幅代碼沒有響應，因此較大尺寸的橫幅會從較小尺寸的容器中彈出。 我創建了以下代碼，以便在最初加載頁面時，它將在正確的空間中加載適當大小的橫幅。 但是，我想對其進行設置，以便在調整瀏覽器窗口的大小時，刷新包含橫幅代碼（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>
3 個解決方案
解決方案1
0 2016-01-29 02:29:07
在此處找到與亞馬遜橫幅有關的東西： 亞馬遜合作伙伴網站
解決方案2
0 2016-01-29 20:01:39
我沒有使用此特定庫的經驗，但是我將通過查看您的代碼來分享一些想法：
- 文檔是否說數字變量設置需要為字符串或數字？ （
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.前綴window.在全球空間中顯式設置它們，這是Amazon腳本可能期望找到它們的地方。
解決方案3
0 2016-01-31 01:34:33
如果您不能為類別使用自適應橫幅，請嘗試僅使用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有助於防止橫幅在加載頁面時發生變化。
希望有幫助！
使用javascript重新加載div的內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.