我有这个代码隐藏/显示div,具体取决于用户是否单击按钮来执行此操作。它还设置一个cookie来记住状态,这样如果用户刷新页面,div状态保持不变。一切正常,直到我添加代码以显示DFP广告,并且出于某种原因,它使用的iframe会在刷新页面时覆盖隐藏状态 - 它仍会显示广告,即使隐藏了包含的div? / p>
这是我的代码,如果有任何帮助,我将不胜感激: - )
由于
现在是http://jsfiddle.net/jamesisapayne/xhzes/
<style>
#billboardButton {
background-color:#f1f1f1;
color:#666;
padding:3px;
width:100px;
cursor:pointer;
text-align:center;
margin:0 auto;
}
</style>
<!-- Load the latest version of jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Load the jquery.cookie.js plugin -->
<script src="https://googledrive.com/host/0B7ZDS1Dob8_8WXhpUVdtNjVNdWc/"></script>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/4856165/Forum_Billboard_970x250', [970, 250], 'billboard').addService(googletag.pubads());
googletag.pubads().setTargeting('SiteType', 'giraffetest');
googletag.enableServices();
});
</script>
<script>
$(document).ready(function(){
// Check to see if the billboardStatus cookie has been set
if($.cookie('billboardStatus')) {
// If yes, define the variable
var cook = $.cookie('billboardStatus');
} else {
// Else set it as true by default and with an expiry date of 1 day = 24 hours
var cook = $.cookie('billboardStatus', 'true', {expires: 1});
}
// On refresh, if the cookie value is false i.e. the ad spot is closed
if(cook=='false') {
// hide the billboard ad spot
$('#billboard').hide();
// Change the open/close button settings
$("#billboardButton").css("backgroundColor", "#e1e1e1").text('Open Ad');
} else { // Else if the value is set as true i.e. open
// Show the ad spot
$('#billboard').show();
// Change the open/close button settings
$("#billboardButton").text('Close Ad');
}
// When the user clciks on the open/close button…
$('#billboardButton').on('click', function() {
// Toggle the opening/closing of the ad spot
$('#billboard').stop().slideToggle('slow', function(){
// Set the background colour and the text value of the button depending on what state the button is currently in
$("#billboardButton").css("backgroundColor", $(this).is(':not(:visible)') ? "#e1e1e1" : "").text($(this).is(':visible') ? 'Close Ad' : 'Open Ad');
// Set the cookie value to false i.e. closed
$.cookie('billboardStatus', $(this).is(':visible'), {expires:1});
}); // End slideToggle
}); // End on click
}); // End document ready
</script>
<div style="width:970px;margin:20px auto;">
<div id="billboardButton">Close Ad</div>
<div id='billboard' style='width:970px; height:250px; background-color:#0C9;'>
<script type='text/javascript'>
//googletag.cmd.push(function() { googletag.display('billboard'); });
</script>
</div>
</div>
答案 0 :(得分:0)
通过在jQuery中添加dfp代码而不是直接添加到html中来管理找到答案。已将调用代码分为两行(59和73)并进行测试。这是完成的代码...
<style>
#billboardButton {
background-color:#f1f1f1;
color:#666;
padding:3px;
width:100px;
cursor:pointer;
text-align:center;
margin:0 auto;
}
</style>
<!-- Load the latest version of jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Load the jquery.cookie.js plugin -->
<script src="https://googledrive.com/host/0B7ZDS1Dob8_8WXhpUVdtNjVNdWc/"></script>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/4856165/Forum_Billboard_970x250', [970, 250], 'billboard').addService(googletag.pubads());
googletag.pubads().setTargeting('SiteType', 'giraffetest');
googletag.enableServices();
});
</script>
<script>
$(document).ready(function(){
// Check to see if the billboardStatus cookie has been set
if($.cookie('billboardStatus')) {
// If yes, define the variable
var cook = $.cookie('billboardStatus');
} else {
// Else set it as true by default and with an expiry date of 1 day = 24 hours
var cook = $.cookie('billboardStatus', 'true', {expires: 1});
}
// On refresh, if the cookie value is false i.e. the ad spot is closed
if(cook=='false') {
// hide the billboard ad spot
$('#billboard').hide();
//$('iframe,#google_ads_iframe_/4856165/Forum_Billboard_970x250_0').css('display','none');
// Change the open/close button settings
$("#billboardButton").css("backgroundColor", "#e1e1e1").text('Open Ad');
} else { // Else if the value is set as true i.e. open
// Show the ad spot
$('#billboard').show().html("<script type='text/javascript'>googletag.cmd.push(function() { googletag.display('billboard'); });<\/script>");
// Change the open/close button settings
$("#billboardButton").text('Close Ad');
}
// When the user clicks on the open/close button…
$('#billboardButton').on('click', function() {
// Toggle the opening/closing of the ad spot
$('#billboard').stop().slideToggle('slow', function(){
// Set the background colour and the text value of the button depending on what state the button is currently in
$("#billboardButton").css("backgroundColor", $(this).is(':not(:visible)') ? "#e1e1e1" : "").text($(this).is(':visible') ? 'Close Ad' : 'Open Ad');
// Set the cookie value to false i.e. closed
$.cookie('billboardStatus', $(this).is(':visible'), {expires:1});
$("#billboard").is(':visible') ? $("#billboard").html("<script type='text/javascript'>googletag.cmd.push(function() { googletag.display('billboard'); });<\/script>") : "";
}); // End slideToggle
return false;
}); // End on click
}); // End document ready
</script>
<div style="width:970px;margin:20px auto;">
<div id="billboardButton">Close Ad</div>
<div id='billboard' style='width:970px; height:250px; background-color:#0C9;'></div>
</div>
答案 1 :(得分:0)
只需使用
onClick="funtionName()"
funtion funtionName(){
$('#iframeID').toggle();
}