0

I have multiple widgets like this

var c2409 = "<div class="products">PRODUCT1 PRODUCT2 PRODUCT4 ...</div>";
document.write(c2409)

And I call this

<script src="website/getjswidget.aspx?cid=xxxx-xxxx-xxx-xxxx"></script>

Now looks like sometime after I clear the cache, this replace everything in my html and I get a blank page only with this div from my widget. Any other solutions to replace document.write?

Adrian
  • 475
  • 6
  • 19
  • Can you give us more details? What type of widgets are they? What are they for? – Justas Nov 03 '15 at 11:03
  • I use that to export a list of products in html code from a database, so I can use it on multiple domains. – Adrian Nov 03 '15 at 11:05
  • 2
    That's not a bug. Document.write is intended to replace all of the page contents. See http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – Reeno Nov 03 '15 at 11:11
  • it was ok from 2006 untill this year ;) – Adrian Nov 03 '15 at 11:14
  • as @Reeno pointed out. When the page complete load, execution of `document.write` will override the whole DOM content – frikinside Nov 03 '15 at 11:14

1 Answers1

0

This is by design.

The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.

Source

If you want to append data to your webpage, use this:

document.body.innerHTML += 'your HTML code to add'

Edit: If you want to show this in a particular element, you can do something like this:

<!-- HTML element -->
<div id="myData"></div>

<!- Javascript code -->
document.getElementById('myData').innerHTML += 'your HTML'

Edit 2 (After some searching): You can get the current script element by using document.currentScript and then perhaps use Node.insertBefore to create a div right before that script tag, to put your data in.

Edit 3: Apparently document.currentScript doesn't work in IE. But this answer may help.

Community
  • 1
  • 1
Wouter
  • 730
  • 3
  • 11
  • I need this to show after the script not on the end of the body – Adrian Nov 03 '15 at 11:17
  • You see I can't really add a ID now, beacuse I already use thousands of widgets on websites. – Adrian Nov 03 '15 at 11:20
  • @Adrian I edited my answer. Unfortunately `document.write` can never be relied on 100% for what you want to do with it, but implementing it like in my answer is a way to always have the html end up where you want it. – Wouter Nov 03 '15 at 11:20
  • @Adrian see my second edit, perhaps this can help you find a solution? – Wouter Nov 03 '15 at 11:26
  • can't use that beacuse I already use thousands of widgets on websites. So I need a way to fix this from same script :( – Adrian Nov 03 '15 at 11:28
  • My second solution, retrieving the current script element and adding a HTML element next to it, would work from your existing script without having to manipulate the external website. See my latest edit for IE compatibility though. – Wouter Nov 03 '15 at 11:31
  • thanks for this, but I need IE support too. Also looks like Opera and more mobile phone are not suporting this. That fix for IE is ok when you use only 1 single script on page, but I have more – Adrian Nov 03 '15 at 12:08
  • @Adrian you'd have to go through the script tags and find the one that loads your script, for example by matching the `src` attribute. Afaik there are no 'simple' options that can replace `document.write`. – Wouter Nov 03 '15 at 13:01
  • yes I think this is the only real solution. thank you! – Adrian Nov 03 '15 at 13:25