document.write() warnings from Chrome with scriptaculous

344 views
Skip to first unread message

Steevithak

unread,
Mar 5, 2018, 4:22:05 PM3/5/18
to Prototype & script.aculo.us
I'm doing some maintenance on an older site that was developed using something called prototype.js and scriptaculous. The scriptaculous website pointed me to this Google group for support. 

When pages load I see lots of warnings from Chrome about document.write() being used. Like so:

[Violation] Avoid using document.write()  scriptaculous.js:31
[Violation] Parser was blocked due to document.write(<script>)   scriptaculous.js:31

I get around 7 each of those warnings. From what I've read, it seems they only slow down loading a bit for most users but for users with slow connections, the browser may block the use of document.write() for loading scripts altogether, so I'm thinking we'd be wise to try to fix this issue. Looking in the scriptaculous.js file, I see comments that suggest the document.write() is part of a work-around to load scripts into a decade old version of the Safari browser, so it seems like these are unlikely to be needed anymore. 

The version of scriptaculous in use is v1.9.0 dating back to 2010, so it's fairly ancient but I don't see a newer version available. I guess that leaves me with two questions:

1. Is there an alternate or newer version of scriptaculous available that doesn't rely on document.write()?
2. If not, any recommendations on hacking scriptaculous code ourselves vs migrating to something like jQuery that's actively developed?

-Steve

Walter Lee Davis

unread,
Mar 5, 2018, 4:29:55 PM3/5/18
to prototype-s...@googlegroups.com
You can avoid this warning by simply linking in directly (or precompiling yourself) the individual libraries of Scriptaculous, rather than using the scriptaculous.js front-end script to do that for you (using script.write()).

https://github.com/madrobby/scriptaculous/blob/ae999c943e468df4b3f39283745b1e3f99468d29/src/scriptaculous.js

If you just use scriptaculous.js without a load= querystring to indicate which part(s) you want, then you get everything. These need to be loaded in the following order:

["builder", "effects", "dragdrop", "controls", "slider", "sound"]

And they need to load after Prototype.js, naturally.

You may find that all you need to link is effects.js, nine times out of ten, that's all that's needed.

Walter


Reply all
Reply to author
Forward
0 new messages