2

My problem was that I wanted to add JavaScript into a html page, thanks to Andy E, I find the way to add my JavaScript into a html page and be executed. But now my problem is that all the page is overwritten by the JavaScript. Someone know how to do the same thing but without overwritten the page with the JavaScript, something to add to the code or something to change :) ?

  • I don't want to reload the page because I don't want that the user see the page twice, if the page contain a lot of stuff it will be very inconvenient.

This is a short-code which show you my problem: (I changed the ad tag because it is not mine, so I can not put it in this public place)

<html>
    <head> 
      <script type="text/javascript" src="jquery.js"></script> 
      <script type="text/javascript"> 
         $(document).ready(function() {;
            var correct_div = document.getElementById('ad_468x60');

            var sTag1 = document.createElement("script");
            sTag1.type = "text/javascript";
            sTag1.text = "<!--\ngoogle_ad_client = \"pub-1234567890123456\";\ngoogle_alternate_color = \"FFFFFF\";\ngoogle_ad_width = 468;\ngoogle_ad_height = 60;\ngoogle_ad_format = \"468x60_as\";\ngoogle_ad_channel =\"123456789\";\ngoogle_color_border = \"FFFFC6\";\ngoogle_color_bg = \"FFFFFF\";\ngoogle_color_link = \"000000\";\ngoogle_color_url = \"666666\";\ngoogle_color_text = \"333333\";\n//-->"
            correct_div.appendChild(sTag1);

            var sTag2 = document.createElement("script");
            sTag2.type = "text/javascript";
            sTag2.src = "http://google_ad_url.js";
            correct_div.appendChild(sTag2)
         });
      </script> 
    </head>

    <body>
      <div> 
         "This text appears and disappears after the ad is displayed"
      </div>

      <div id="ad_468x60">
         <!-- The JavaScript come here -->
      </div> 
    </body>
</html>

EDIT : Could I use an iframe to do this ?

Community
  • 1
  • 1
Lucas
  • 271
  • 2
  • 4
  • 12

3 Answers3

2

If the code uses document.write in it, it will overwrite the page. There is really nothing you can do about that.

epascarello
  • 204,599
  • 20
  • 195
  • 236
  • Yes, after looking at the google JS it is using document.write... Thanks a lot anyway, we are now sure we can give up this way of doing. – Lucas Aug 06 '10 at 19:50
2

There's a couple of things you could do.

  • Add the script to an empty iframe. This would result in the iframe content being overwritten by document.write. You would need to size the iframe to the appropriate dimensions.

  • Override the document.write function with your own method. Something like this:

    // Create a closure to keep the old document.write private 
(function () {
    var oldDW = document.write;
    document.write = function (s) {
        // Document not parsed yet, allow document.write:
        if (document.readyState != "complete")
            oldDW.call(document, s);
        // Dangerous use, switch to innerHTML instead:
        else          
            document.getElementById("ad_468x60").innerHTML = s;
    }
})();

    Example

As you know now, if there are any script elements written by document.write() the second method there wouldn't cut it - you'd have to write a more complex routine to parse out the script element and use document.createElement() instead.

Andy E
  • 338,112
  • 86
  • 474
  • 445
  • Ok Andy, thanks for all your answers once again. The google ad seems to be itself in an iframe, do you think that will be a problem ? We are trying the first solution for the moment – Lucas Aug 09 '10 at 17:24
  • @Lucas: it shouldn't be a problem. If the *document.write()* is just writing an iframe element to the page, it might be quite a bit easier for you to go with the overriding method. – Andy E Aug 09 '10 at 17:27
  • Seems like it doesn't writing elements but here is the google code, it will be simpler: http://pagead2.googlesyndication.com/pagead/show_ads.js So I try the overriding method – Lucas Aug 09 '10 at 19:03
  • But there will be problem if my HTML page use the document.write function somewhere else than in the iframe no ? – Lucas Aug 09 '10 at 19:21
  • @Lucas: That depends entirely on your overriding method, you can make it work however you want. For instance, I've updated the method in my answer to use the native *document.write()* when it's safe and switch to *innerHTML* when it's unsafe. You could go as far as running a regular expression on the string being passed to check where you want to put it. – Andy E Aug 09 '10 at 21:46
0

You should use the getScript function here.

Josh Stodola
  • 81,538
  • 47
  • 180
  • 227
  • Ok, but I am a jQuery newbie... I read the link on jQuery you gave me but I can't see how I should use it here – Lucas Aug 07 '10 at 01:26