直接使用窗口大小调整中的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.