javascript - document.write creates content out of the required div container in opera and msie - Stack Overflow

IT技术

更新时间：2025-03-120

admin管理员组
文章数量:1303404

I have an ad code that I am embedding in a div and then i am wrapping them all within a document.write. When I output it on a page, div remains in it's position but contents of ad code are created elsewhere i.e bottom left corner of page. Previously i had posted wrong code, here's the working code:

    <html>
<head>
<script type="text/javascript" src=".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/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D";
var pop=0;
document.write("<scr"+"ipt type=\"text/javascript\" src=\".js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\".fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus/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=".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>

The code within div is the code from an ad server named adtech. Now this is all within a wrapper div. Note, in this code, in first div of document.write I have given to the main wrapper 'visibility:none', to hide it initially on older browser.(Suggestion from Perry Tew).

But when I turn it's visibility on, banner ad is rendered outside wrapper div. Thus is experienced on IE-6/7/8 and old versions of opera i.e 11.20 and older.

I have an ad code that I am embedding in a div and then i am wrapping them all within a document.write. When I output it on a page, div remains in it's position but contents of ad code are created elsewhere i.e bottom left corner of page. Previously i had posted wrong code, here's the working code:

    <html>
<head>
<script type="text/javascript" src="http://code.jquery./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./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/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus./adlink/5359/2132703/0/2237/AdId=2384320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus./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./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>

The code within div is the code from an ad server named adtech. Now this is all within a wrapper div. Note, in this code, in first div of document.write I have given to the main wrapper 'visibility:none', to hide it initially on older browser.(Suggestion from Perry Tew).

But when I turn it's visibility on, banner ad is rendered outside wrapper div. Thus is experienced on IE-6/7/8 and old versions of opera i.e 11.20 and older.

Share Improve this question edited Jan 15, 2012 at 8:51 Mat 207k41 gold badges402 silver badges417 bronze badges asked Jan 13, 2012 at 16:10 Shades88 8,36025 gold badges91 silver badges134 bronze badges

Am I missing something? You appear to be trying to execute JavaScript outside of a <script> tag on line 2. – Jonathan Rich Commented Jan 13, 2012 at 16:19
please have a look at the updated code. – Shades88 Commented Jan 14, 2012 at 19:05

Add a ment |

6 Answers 6

Sorted by: Reset to default 2 +100

I have already dealt with adtech and faced that very same issue in the past

Your problem es from the fact than in older versions of IE, a distant script tag written with document.write() will not assume the position in your dom of being right after the current script block which added it.

So for exemple:

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');

In modern browsers, this is evaluated as (obviously things are more plicated than that, but for the sake of explanation):

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

Which ends up meaning:

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

In the problematic browsers such as IE 7 however, it ends up as:

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

And then

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

As a result, your pubToolbar_banner div is closed before the adtech tags actually run, so the tag is put outside of them, inside the pubToolbar div.

Please note that this is an overly simplified explanation of the issue to make you understand what kind of problem is happening. In all honesty, I don't remember all the details myself.

Easiest solution ? Create your container div in a different script tag. For exemple try this code:

<html>
<head>
<script type="text/javascript" src="http://code.jquery./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./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/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus./adlink/5359/2132703/0/2237/AdId=23\
84320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus./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./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>

You need to put both the opening tag and the closing tag of you container in a different script block (such as in my example), if I had simply moved the closing tag out the issue would have remained. The technical reasons as to why are similars.

This solution works for me on IE 6/7 and modern browsers, the ad appears inside the pubToolbar_banner div, which is itself inside the pubToolbar div. After page loading, pubToolbar_banner will slowly scroll up inside pubToolbar using animate.

Let me know if that helps, and if not try to provide a screenshot of the issue.

Your code is misleading...

Inside

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

you have written JavaScript... ex : var section=4201, but you have no delcared JavaScript container element before it

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

Try this instead... this will write specifically to the element you want:

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

Okay, second attempt. It looks like you're running into a nasty IE bug. I found a really good article for it here: http://www.positioniseverything/explorer/ienondisappearcontentbugPIE/index.htm

To make the content disappear on IE7, I added the following CSS rule. It may or may not meet your needs. Using the asterisk is a hack, but there's a lot of minified javascript creating a lot of elements and it's tough to follow what's going on, so to answer you as quickly as possible, I used a hammer to swat that fly.

I don't know if you need to toggle this visibility, or what, so my answer may not be a perfect solution, but at least you know what you're up against. The article above is probably you're best starting point. In case the page disappears, here's a verbatim diagnosis from the site:

The bug

In Internet Explorer (IE) 6, 7 and 8 in 'Compatibility View' there is a bug when hiding content within a hidden container element. The content will remain visible, even though its 'display' property is 'none', as can be observed when the container is re-shown again.

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

<script type='text/javascript'>
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'http://cdn.atomex/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>

Okay, I had to make a lot of assumptions here, but here is how I would handle the ad appearing outside of the pubToolbar div.

First, set pubToolbar to relative and its child, pubToolbar_banner to absolute. This way you can position the banner in pubToolbar. Next, set overflow to hidden and banner to sit just under. This will cause the banner to hide. Finally animate the banner up.

http://jsfiddle/SHKFy/

Change your document.write line to this

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");

Then use the following jQuery for animation setup and execution.

$('#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');

This is all kind of hacky because I don't really understand the constraints you are operating under.

I could observe this issue in IE. I required to update some CSS. As you have already included jQuery. We can modify the DOM in any way as you wish :)

Here, we require to use some code run after dom ready. See the jQuery code below:

<html>
<head>
<script type="text/javascript" src="http://code.jquery./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./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/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus./adlink/5359/2132703/0/2237/AdId=2384320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus./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./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>

Please, explain what you want to do with animate. As this code is not working here.

本文标签： javascriptdocumentwrite creates content out of the required div container in opera and msieStack Overflow

版权声明：本文标题：javascript - document.write creates content out of the required div container in opera and msie - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1741750062a2395770.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - document.write creates content out of the required div container in opera and msie - Stack Overflow

6 Answers 6

更多相关文章