Question

我有一个广告代码，我嵌入div，然后我将它们全部包装在document.write中。当我在页面上输出时，div保持在它的位置，但广告代码的内容在其他地方创建，即页面的左下角。以前我发错了代码，这是工作代码：

    <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">  
</script>
<style>
#pubToolbar{
    margin-left: 20%;
    width:700px;
    height: 90px;
    border: 2px solid #888;
    visibility: hidden;
}
</style>
</head>
<body>
<div id="pubToolbar">
<script type="text/javascript">
document.write("<div align=\"center\" id=\"pubToolbar_banner\" style=\"width:728px;height:90px;margin:0px auto;z-index:9999;margin-left:72px;display:block;bottom:-120px;position:relative;border:2px solid #999\" class=\"cpa-campaign-white\">\n"); 
var section=3901;
var width=728;
var height=90;
var enc=1;
var clicktag="http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D";
var pop=0;
document.write("<scr"+"ipt type=\"text/javascript\" src=\"http://cdn.atomex.net/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex.net/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus.com/adlink/5359/2132703/0/2237/AdId=2384320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D\" height=\"90\" width=\"728\" scrolling=\"no\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" ></iframe></noscript>\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("</div>\n");
var adcount_2132703_1_=new Image();
adcount_2132703_1_.src="http://adserver.adtechus.com/adcount/3.0/5359/2132703/0/2237/AdId=2384320;BnId=1;ct=3358222966;st=1276;adcid=1;itime=542661387;reqtype=5;";
// 034665b732c4e8a5a7992aeb7377c4b8
</script>
<script type="text/javascript">
    $('#pubToolbar_banner').css('display','block');
    $('#pubToolbar').css('visibility','visible');
    $('#pubToolbar').animate({bottom:0},1500,'swing');
</script>
</div>
</body>
</html>

div中的代码是来自名为adtech的广告服务器的代码。现在这都在包装div中。注意，在这段代码中，在document.write的第一个div中，我给了主包装器'visibility：none'，最初在旧浏览器上隐藏它。（Perry Tew的建议）。

但是当我打开它的可见性时，横幅广告会在包装div之外呈现。因此在IE-6/7/8和旧版本的歌剧中经历过，即11.20及更早版本。

Answer 1

您的代码具有误导性......

内部

<div id="pubToolbar_banner"></div>

你写过JavaScript ... ex：var section = 4201，但你之前没有delcared JavaScript容器元素

<script type="text/javascript"></script>

试试这个......这将专门写给你想要的元素：

 document.getElementById("pubToolbar_banner").write("Stuff you want to write here");

Answer 2

我已经处理过adtech并且在过去遇到了同样的问题

你的问题来自于IE的旧版本，用document.write（）编写的远程脚本标记不会假定你的dom中的位置正好在当前添加它的脚本块之后。

例如：

的index.html

<script type="text/javascript">
doSomething();
document.write("<scr"+"ipt type=\"text/javascript\" src=\"/something.js\">\n");
doSomething();
</script>

something.js

document.write('hello');

在现代浏览器中，这被评估为（显然事情比这更复杂，但为了解释）：

<script type="text/javascript">
doSomething();
</script>
<script type="text/javascript" src="/something.js">
<script type="text/javascript">
doSomething();
</script>

最终意义：

<script type="text/javascript">
doSomething();
document.write('hello');
doSomething();
</script>

在有问题的浏览器（例如IE 7）中，它最终会显示为：

<script type="text/javascript">
doSomething();
doSomething();
</script>
<script type="text/javascript" src="/something.js">

然后

<script type="text/javascript">
doSomething();
doSomething();
</script>
<script type="text/javascript">
document.write('hello');
</script>

因此，在 adtech标记实际运行之前，您的pubToolbar_banner div已关闭，因此标记将放在pubToolbar div内部。

请注意，这是一个过于简化的问题解释，可让您了解发生了什么样的问题。老实说，我自己也不记得所有的细节。

最简单的解决方案？在另一个脚本标记中创建容器div。例如，尝试以下代码：

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script> <style> #pubToolbar{ margin-left: 20%; width:732px; height: 90px; border: 2px solid #888; visibility: hidden; display: none; } </style> </head> <body> <div id="pubToolbar" style="background-color: red;"> <script type="text/javascript"> document.write("<div align=\"center\" id=\"pubToolbar_banner\" style=\"width:728px;height:90px;margin:0px auto;z-index:9999;display:block;bottom:-90px;position:relative;background-color: purple; border:2px solid #99\ 9\" class=\"cpa-campaign-white\">\n"); </script> <script type="text/javascript"> var section=3901; var width=728; var height=90; var enc=1; var clicktag="http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D"; var pop=0; document.write("<scr"+"ipt type=\"text/javascript\" src=\"http://cdn.atomex.net/static/js/ads-min.js\">\n"); document.write("</scr"+"ipt>\n"); document.write("<noscript><iframe src=\"http://ads.atomex.net/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus.com/adlink/5359/2132703/0/2237/AdId=23\ 84320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D\" height=\"90\" width=\"728\" scrolling=\"no\ \" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" ></iframe></noscript>\n"); document.write("\n"); document.write("\n"); document.write("\n"); document.write("\n"); var adcount_2132703_1_=new Image(); adcount_2132703_1_.src="http://adserver.adtechus.com/adcount/3.0/5359/2132703/0/2237/AdId=2384320;BnId=1;ct=3358222966;st=1276;adcid=1;itime=542661387;reqtype=5;"; // 034665b732c4e8a5a7992aeb7377c4b8 </script> <script type="text/javascript"> document.write("</div>\n"); </script> </div> <script type="text/javascript"> $(document).ready(function() { $('#pubToolbar').css('visibility','visible').fadeIn('slow', function() { $('#pubToolbar_banner').animate({ bottom:0 },"slow"); }); }); </script> </body> </html>

您需要将容器的开始标记和结束标记放在不同的脚本块中（例如在我的示例中），如果我只是简单地移动了结束标记，则问题仍然存在。关于为什么是类似物的技术原因。

此解决方案适用于IE 6/7和现代浏览器，广告显示在pubToolbar_banner div中，该div本身位于pubToolbar div中。页面加载后，pubToolbar_banner将使用animate在pubToolbar中慢慢向上滚动。

如果有帮助，请告诉我，如果没有，请尝试提供问题的屏幕截图。

Answer 3

好的，第二次尝试。看起来你遇到了一个令人讨厌的IE漏洞。我在这里发现了一篇非常好的文章： http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm

为了使内容在IE7上消失，我添加了以下CSS规则。它可能会也可能不会满足您的需求。使用星号是一个黑客，但有很多缩小的javascript创建了很多元素，并且很难跟踪正在发生的事情，所以为了尽快回答你，我用锤子拍打飞行。

我不知道你是否需要切换这种可见性或什么，所以我的答案可能不是一个完美的解决方案，但至少你知道你的反对意见。上面的文章可能是你最好的起点。如果页面消失，这里是网站的逐字诊断：

错误

在“兼容性视图”中的Internet Explorer（IE）6,7和8中，隐藏隐藏容器元素中的内容时会出现错误。内容将保持可见，即使其“显示”属性为“无”，这可以在再次重新显示容器时观察到。

#pubToolbar *{
    visibility:hidden !important;
    display:none !important;
}

Answer 4

<script type='text/javascript'>
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'http://cdn.atomex.net/static/js/ads-min.js';
      var head = document.getElementsByTagName("head")[0];
      head.appendChild(script);

      var noscript = document.createElement('noscript');
      var iframe = document.createElement('iframe');
      iframe.src = 'verylongstuff';
      noscript.appendChild(iframe);

      var myDiv = document.getElementsById("myDivId");
      myDiv.appendChild(noscript);

      // you other javascript here.
 </script>

Answer 5

好的，我不得不在这里做出很多假设，但这里是我如何处理pubToolbar div之外出现的广告。

首先，将pubToolbar设置为relative，将其子项pubToolbar_banner设置为absolute。这样您就可以在pubToolbar中定位横幅。接下来，设置溢出到隐藏和横幅坐下。这将导致横幅隐藏。最后为横幅设置动画。

http://jsfiddle.net/SHKFy/

将document.write行更改为此

document.write("<div align=\"center\" id=\"pubToolbar_banner\" style=\"position:absolute;top:0;left:0;width:728px;height:90px;margin:0px auto;z-index:9999;display:block;border:2px solid #999\" class=\"cpa-campaign-white\">\n");

然后使用以下jQuery进行动画设置和执行。

$('#pubToolbar_banner').css('display','block');
$('#pubToolbar').css('visibility','visible').css('position', 'relative').css('overflow', 'hidden');
$('#pubToolbar_banner').css('top', $('#pubToolbar').height());
$('#pubToolbar_banner').animate({top:0}, 1500, 'swing');

这是一种hacky，因为我并不真正理解你所运行的限制。

Answer 6

我可以在IE中观察到这个问题。我需要更新一些CSS。因为你已经包含了jQuery。我们可以按照您的意愿修改DOM：）

在这里，我们需要在dom准备就绪后使用一些代码。请参阅下面的jQuery代码：

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">  
</script>
<script type="text/javascript">  
$(document).ready(function(){ 
    $("#ebStdBanner0").appendTo("#pubToolbar_banner");  
});
</script>

<style>
#pubToolbar{
    margin-left: 20%;
    width:732px;
    height: 90px;
    border: 2px solid #888;
    visibility: hidden;
}

#pubToolbar_banner{
   border: 2px solid #999999;
    display: block;
    height: 90px;
    position: relative;
    width: 728px;
    z-index: 9999;
}
</style>
</head>
<body>
<div id="pubToolbar">
<script type="text/javascript">
document.write("<div align=\"center\" id=\"pubToolbar_banner\"  class=\"cpa-campaign-white\">\n"); 
var section=3901;
var width=728;
var height=90;
var enc=1;
var clicktag="http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D";
var pop=0;
document.write("<scr"+"ipt type=\"text/javascript\" src=\"http://cdn.atomex.net/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex.net/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus.com/adlink/5359/2132703/0/2237/AdId=2384320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D\" height=\"90\" width=\"728\" scrolling=\"no\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" ></iframe></noscript>\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("</div>\n");
var adcount_2132703_1_=new Image();
adcount_2132703_1_.src="http://adserver.adtechus.com/adcount/3.0/5359/2132703/0/2237/AdId=2384320;BnId=1;ct=3358222966;st=1276;adcid=1;itime=542661387;reqtype=5;";
// 034665b732c4e8a5a7992aeb7377c4b8
</script>
<script type="text/javascript">  
    $('#pubToolbar').css('visibility','visible');   
    $('#pubToolbar').animate({bottom:0},1500,'swing');
</script>
</div>
</body>
</html>

请解释你想要做什么动画。由于此代码在此处不起作用。

document.write在opera和msie中从所需的div容器中创建内容

6 个答案: