Geek Answers Handbook

A warning. The call to document.write () from an asynchronously loaded external script was ignored. How is this fixed?

In my Ruby on Rails application, I am using the Facebox plugin for the Ajax popup. I have 2 pages called add_retail_stores/new.html.erb and add_retail_stores/new.js The new.js page inherits all the elements of the new.html.erb page new.html.erb that it looks exactly the same. I have a google map script on an HTML page that works as it should. But the new.js page that appears on my other page called add_store_prices.html.erb page ( <%= link_to add_retail_store_path, :remote => true %> )

I get an error message:

Warning: calling the document.write () function from an asynchronously loaded external script has been ignored. Source file: http: // localhost: 3000 / add_store_prices Line: 0

I believe because it is trying to go through 2 functions / scripts. First for Facebox and then Google script. Does anyone know how to handle this error?

EDIT:

I believe the Facebox plugin uses document.write , but I'm not sure where, perhaps, in one of these two lines on my page?

new.js:

 $.facebox('<%= escape_javascript(render :template => 'business_retail_stores/new.html') %>') $('#facebox form').data('remote','true');
+4
source share
3 answers

Do not use document.write. The script loads asynchronously, which means that it is disconnected from the parsing state of the document. There is literally NO WAY for the JS engine to know where document.write should be executed on the page.

The external script can be loaded instantly, and document.write executes the <script src="..."> , or it can get into net.burp and load in an hour, which means that document.write will be marked at the end of the page. This is quite literally a race condition, so JS engines will ignore document.writes from scripts loaded asynchronously.

Convert document.write to use regular DOM operations protected by a handler like document.onload .

+12
source

If you have access to the specified .js file, the best solution would be to change the document.write () method and replace it with one that makes sense in order to distribute the contents contained inside.

The reasons for this are very well described above.

If you use document.write to write html tags to a page:

 document.write("<script src=...></script>");

or

 document.write("<img href=... />");

Consider using the same type of asynchronous format that you already used:

 // Add/Remove/Sugar these components to taste script = document.createElement("script"); script.onload = function () { namespaced.func.init(); }; script.src = "http://..."; document.getElementsByTagName("script")[0].parentNode.appendChild(script);

If you want to add DOM elements for viewing and user interaction, you would also be better off:

a) Capturing a specific container (section / div) by id and adding your content:

 document.getElementById("price").innerHTML = "<span>$39.95</span>";

b) Building content outside the DOM and entering it into the container:

 var frag = document.createDocumentFragment(), span = document.createElement("span"); span.innerText = "39.95"; frag.appendChild(span); document.getElementById("price").appendChild(frag);

Again, sugar to your liking.

If you do not have access to this second .js file, I would suggest taking it with you.

+3
source

I had the same problem loading google maps with place library. I temporarily override the write function to create a new script element in my head.

 (function() { var docWrite = document.write; document.write = function(text) { var res = /^<script[^>]*src="([^"]*)"[^>]*><\/script>$/.exec(text); if (res) { console.log("Adding script " + res[1]); var head = document.getElementsByTagName('head')[0]; var script = document.createElement("script"); script.src = res[1]; head.appendChild(script); } else { docWrite(text); } } })();

Now all I have to do to load a script asynchronously is

 document.write('<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>');
0
source

More articles:


All Articles