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

我有一个广告代码，我将其嵌入到div中，然后将它们全部封装在document.write中。当我在页面上输出时，div仍然保留在其位置上，但广告代码的内容是在其他地方创建的，即页面的左下角。以前我贴过错误的代码，这里的工作代码：document.write在opera和msie中创建所需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。请注意，在这段代码中，在document.write的第一个div中，我给出了主包装的'visibility：none'，以便在较早的浏览器中隐藏它（建议来自Perry Tew）。

但是，当我把它变成可见性时，横幅广告会呈现在包装div之外。因此，在IE-6/7/8和旧版本的歌剧（如11.20及更早版本）上都会遇到这种情况。

来源

2012-01-13 Shades88

我错过了什么吗？您似乎试图在第2行的

您的代码是误导...

内

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

您已经编写的JavaScript ...例如：VAR部分= 4201，但你有没有delcared JavaScript的容器元素之前

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

试试这个，而不是......这将写入你想要的元素：

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

来源

2012-01-13 16:24:22 Downpour046

<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>

来源

2012-01-13 16:32:56

这可能工作。但我无法更改广告服务器返回的代码。必须按原样交付。我首先在PHP端接收它，然后替换模板中的内容，然后转储内容客户端浏览器。那是在旧版浏览器 – Shades88 2012-01-14 19:08:48

有问题时发生的错误。我知道那痛苦。 – 2012-01-14 19:45:52

任何解决方案？ – Shades88 2012-01-14 19:56:47

好了，第二次尝试。它看起来像你遇到了一个讨厌的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; 
}

来源

2012-01-15 02:47:57

确定这是非常有帮助的。但我仍然在努力解决我最初的问题。现在我可以隐藏内容。接下来我想做的是从下往上制作容器。（请参阅更新的代码）。当我这样做时，我看到广告横幅已被渲染到别处！这种情况在IE-6/7/8或更旧的歌剧中是一样的。 – Shades88 2012-01-15 06:59:47

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

首先，将pubToolbar设置为relative并将其子项pubToolbar_banner设置为绝对值。这样您可以将横幅放置在pubToolbar中。接下来，将溢出设置为隐藏，并将横幅置于正下方。这将导致横幅隐藏。最后让旗帜动起来。

http://jsfiddle.net/SHKFy/

您的文件撰写行更改此

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，因为我不了解你正在使用的约束条件。

来源

2012-01-16 05:12:31 mrtsherman

我可以在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>

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

来源

2012-01-16 05:27:41

与那个动画代码哦，我想动画pubToolbar。所以它来自页面底部到底部 – Shades88 2012-01-16 09:20:24

好吧我缺少'bottom：-120px'属性给pubToolbar。有了这个，动画代码应该可以工作 – Shades88 2012-01-16 09:21:42

上面的代码是否可以在IE中使用？ – 2012-01-16 09:27:01

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

相关问题