0

I'm planning to start an Ad Network from Scratch and I'm studying the market and also I'm trying to find out best ways to deal with the existing issues. I already know google users some code like below to generate the ad contents for the uses using javascript.

(As @crazimoin answered in my previous question)

document.write('<iframe src="http://myadserver.com/showads.php?ad_client='+ ad_client+'&ad_slot='+ad_slot+' margin=0 frameborder=0 scrolling=no allowtransparency=true ></iframe>');

I want to know these things.

  1. Does it slower than using innerhtml method ?
  2. If it is slower than innerhtml is it good to use innerhtml to generate the ad content for the publishers.
  3. Is there any better way to do this with JQuery without losing the performance ?
  4. Do these methods allow me to generate responsive ad content for the users ?
    (To make them responsive I hope I can use bootstrap or my own css)

Update: I came to know that innerhtml is faster than DOM methods according to this benchmarks of DOM and Innerhtml

Community
  • 1
  • 1
Anton Perera
  • 353
  • 3
  • 9
  • 9
    @Alex: `document.write` is worse. – Cerbrus Dec 10 '14 at 13:00
  • So what are the options I have ? does these two methods slow downs the renedering process of the publishers page ? – Anton Perera Dec 10 '14 at 13:01
  • further reading http://stackoverflow.com/questions/10085109/when-should-one-use-innerhtml-and-when-document-write-in-javascript this has been discussed so many times on the inter webs – Alex Dec 10 '14 at 13:02
  • @Cerbrus right, it might not even work depending on what position it is executed – Alex Dec 10 '14 at 13:03
  • Thanks for that. I read it briefly. Sorry for that. I'll read it again . Does these two methods allows me to generate responsive content ? – Anton Perera Dec 10 '14 at 13:05

1 Answers1

1

Neither.

var adFrame = document.createElement('iframe');
adFrame.src = "....";
adFrame.setAttribute('margin', 0); // Please consider using CSS!
adFrame.setAttribute('frameborder', 0); // Please consider using CSS!
adFrame.setAttribute('scrolling', 'no');
adFrame.setAttribute('allowtransparency', true);

document.body.appendChild(adFrame);

Use element nodes. Gives you much more control without messing with HTML and dangers of XSS.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • Thanks a lot for the explanation with the example. I'm asking to understand this more clearly. Can I use this to generate an ad block ? Can I use this code to provide the publisher to something like this ?
    – Anton Perera Dec 10 '14 at 13:14
  • Instead of appending to `document.body`, append to the node you want. I suggest you read some documentation on basic JavaScript and DOM manipulation. [MDN](https://developer.mozilla.org/) is a good source. – Madara's Ghost Dec 10 '14 at 13:21
  • thanks for the information. I got it. I will read more about the DOM manipulation for sure. Thnaks a lot. – Anton Perera Dec 10 '14 at 13:32
  • But innerhtml is more faster than DOM. according to [this](http://www.quirksmode.org/dom/innerhtml.html) – Anton Perera Dec 10 '14 at 13:41
  • @antonD The benchmarks on that page are from over 7 years ago. Also, "faster" by several microseconds is not something you care about. That's not where the bottleneck is going to be anyway. – Madara's Ghost Dec 10 '14 at 14:35
  • Thanks again for the details. I'll keep in mind these advices and use them when i'm creating them. Thnaks a lot. – Anton Perera Dec 10 '14 at 14:46
  • yah. i got it. Can't we use ajax for this ? – Anton Perera Dec 12 '14 at 09:19