0

I wanted to load a survey widget in the react project, where I create and execute the script in the head after dom gets loaded. But it is unable to generate its poll HTML.

Here is react demo in codesandbox

If I load the same script inside the specific element in the body without react env it works, here it's demo in jsbin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>Polldaddy Title</h1>
 <div id="pollDaddyInfo"> 
   <p>Poll should generate below this statememt</p>
   <script charset="utf-8" src="https://static.polldaddy.com/p/10962229.js"></script>
 </div>
  <h1>Polldaddy End</h1>
</body>
</html>

Help me to identify what could possibly go wrong?

Yash Vekaria
  • 2,285
  • 24
  • 24
  • Did you check your console logs in react version? Please check, there might be some error like "it's not possible to write in a document from asynchronously loaded script" – rajabraza Nov 26 '21 at 07:48

1 Answers1

1

There is nothing wrong with your implementation in either scenario (i.e. with and without react environment).

Actually, in react environment you're loading the script which is async operation and an script that is loaded asynchronously cannot write on the document with document.write which is happening here

https://docs.google.com/document/d/1v3qxRRU7aPs7rk_RwsDPDwuE22Yi1KG_oyKmmgD3lGY/edit?usp=sharing

For supporting my argument here is another thread on stack overflow

rajabraza
  • 333
  • 3
  • 11
  • I had removed async true, then I checked again, and I encountered with new error Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') , please refer the same codesandbox example stated above. – Yash Vekaria Nov 26 '21 at 10:10
  • It's not able to create PDI_container10962229 element. – Yash Vekaria Nov 26 '21 at 10:19
  • 1
    @YashVekaria if you change your div-id from `pollDaddyInfo` to `PDI_container10962229` this will render the code from script – rajabraza Nov 26 '21 at 10:55
  • thats true, but PDI_container10962229 id is being generated dynamically. Moreover why it doesn't require any id in jsbin demo? – Yash Vekaria Nov 26 '21 at 11:00
  • @YashVekaria actually the basic problem is the same I told above that 'A script that is loaded dynamically can't write on document using `document.write`". So how it started working after changing ID? Because if you see the screenshot I shared above, if it finds the element with that ID it use `innerHTML` to append content instead of `document.write` – rajabraza Nov 26 '21 at 11:09
  • Now your question that why its working then in JSbin? Because, there script is not loaded dynamically. If you load the same script there dynamically, you'll find the same issue there as well. – rajabraza Nov 26 '21 at 11:11
  • 1
    Found this article https://developers.google.com/web/updates/2016/08/removing-document-write, suggesting not use document.write() method for 3rd party scripts. – Yash Vekaria Nov 30 '21 at 03:32