What is an alternative to document.write("Hello World!")
Charles Dobie
Nearly every html file on my website contains the statement 'document.write("something")', but HTML Validator and most of the
html-related websites warn me not to use it. But nowhere can I find a hint on what to use instead.
I use it in a few lines of script to hide email addresses from robots, although I suspect it doesn't, but I remember being told years ago that using a href="mailto:"whoever.com" is also bad practice.
_script>
var e ="<a href="
var e =e + "mai"
var e =e + "lto:"
var e =e + "cdobie"
var e =e + "@"
var e =e + "superaje.com"
var e =e + "?subject="
var e =e + "Query: atikokanhistory.org File: bryk-atikokan-deaths-sheet2.htm" + ">"
var e =e + "Please email Charlie Dobie."
var e =e + "<" + "/a" + ">"
document.write(e)
_/script>
What's the best way to go here?
Thanks,
Charlie Dobie.
Barry Carlson
Charlie,
You are correct about the NOT using document.write. I'll go back and have a look at what methods I have 'played with' and maybe have used previously. My memory seems to be reminding me that I had adopted the practice of displaying my email address when hovered over, but by using the pseudo ::before or ::after. That way, it didn't appear in the HTML mark-up, but in the CSS where it appears as - content:"hello[AT]world[DOT]com"; that can be entered in plain text or in a modified unicode format.
In other words, the page had to viewed and the hovered text copied by hand.
However, there is a way of replacing the document.write method; it uses the insertAdjacentHTML method, which provides a means of inserting HTML and Text anywhere you select by using, e.g. - span#sOne.insertAdjacentHTML("afterend", TXT). In this case, the span#sOne tags could be placed somewhere in the text; which is most likely in a <p> tag, and the inserted TXT (the name of the variable holding the text string) would appear 'after' the </span> tag. The current <p> CSS would prevail, while there is still nothing in the <span id="sOne"></span>; they are just being used as a location marker. There many other ways of using this, but I'll have another look in the morning; it's rather late here.
Barry
---------------------------
--
Website FAQs: https://sites.rootsweb.com/~gearyfamily/rootsweb-hosted-web-sites.html
FTP FAQs: https://sites.rootsweb.com/~gearyfamily/publishing-your-sites.html
To contact the owners of this group, write to rw-website-...@googlegroups.com
---
You received this message because you are subscribed to the Google Groups "RootsWeb-Website-Help" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rw-website-he...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/e93913e4-008a-4d9d-99da-91a4d66b4c48%40superaje.com.
Pat Asher
Example: https://kykinfolk.com/nelson/
The navigation menu is called by:
<script src="javascripts/inclnavMenu.js"></script>
and calls: document.write("<ul class=\"slimmenu\">"); document.write("<li><a href=\"http:\/\/kykinfolk.com\/nelson\/index.html\">Home<\/a><\/li>"); document.write("<li><a href=\"http:\/\/kykinfolk.com\/nelson\/ndxPeople.html\">People<\/a><\/li>"); document.write("<li><a href=\"http:\/\/kykinfolk.com\/nelson\/ndxPlaces.html\">Places<\/a><\/li>"); document.write("<li><a href=\"http:\/\/kykinfolk.com\/nelson\/ndxMisc.html\">More<\/a><\/li>"); document.write("<li><a href=\"http:\/\/kykinfolk.com\/nelson\/index.html#search\">Search<\/a><\/li>"); document.write("<\/ul>"); AFAIK, it works just fine, and allows me to edit the navigation menu easily as new items are added or old items are updated. That said, I am always learning some new hiccup in CSS that may use or even needs a hack. Please tell me that document.write works for everyone in the way I have used it. Pat Asher
Charles Dobie
I believe there is a serious security flaw in document.write. I don't even pretend to understand it, but when I googled "document write security", one of the pages which came up was -- https://knowledge.complexsecurity.io/programming/dwrite/
It seems that document.write makes the page vulnerable to "cross-site scripting attacks". The only part of that phrase I understand is "attacks", which can't be a good thing.
However, I can't find anyone offering suggestions on how to get around this problem.
Later,
Charlie Dobie.
--
Website FAQs: https://sites.rootsweb.com/~gearyfamily/rootsweb-hosted-web-sites.html
FTP FAQs: https://sites.rootsweb.com/~gearyfamily/publishing-your-sites.html
To contact the owners of this group, write to rw-website-...@googlegroups.com
---
You received this message because you are subscribed to the Google Groups "RootsWeb-Website-Help" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rw-website-he...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/bf2fffda-761f-42e7-b21c-899aa7797231%40att.net.
Pat Asher
Charles, If i understand the web security issue raised by your link, it would apply to websites where the site visitor was allowed to generate content via a javascript-- which is not the case when using document.write to generate specific html as defined in a particular script, i.e. inclnavMenu.js.
But that is the beauty of this list, we can discuss and (hopefully) find a definitive answer to questions for which the answer is not always obvious.
Pat
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/401371ce-516d-4338-ab9e-6b158d4122ef%40superaje.com.
beth.dj...@gmail.com
LOL LOL LOL
“The only part of that phrase I understand is "attacks", which can't be a good thing.”
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/401371ce-516d-4338-ab9e-6b158d4122ef%40superaje.com.
Charles Dobie
Pat,
I first became aware of the "problem", if indeed it is one, when running my files through HTML Validator. Each use of document.write generates the following warning message:
--start quote
8. Warning in line 71 at character 2: (Grouped->Good Style) Using document.write() is frowned upon (it looks like it was used in this script). Visit https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write/27531116#27531116 for more information. This message is displayed only once.
--end quote
When I look at the page at https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write/27531116#27531116 it gives some interesting info about "the .innerHTML alternative" which I'm going to explore.
I think the security issue comes into play because document.write completely re-loads a web page when it's used. This could be a real bandwidth issue on a cellphone when the user clicks on, for example, an email link where document.write transfers the email address to your email app when you click on it. If it is a huge page full of graphics, etc., then re-loading the page will use up lots of bandwidth.
But I'm not much of a techie any more -- I was in the 1970's and 1980's, but that was in the days of "real" computers with punched cards and flashing lights and . . . . 😂
Chas. Dobie.
Charles, If i understand the web security issue raised by your link, it would apply to websites where the site visitor was allowed to generate content via a javascript-- which is not the case when using document.write to generate specific html as defined in a particular script, i.e. inclnavMenu.js.
But that is the beauty of this list, we can discuss and (hopefully) find a definitive answer to questions for which the answer is not always obvious.
Pat
On 9/7/2024 6:09 PM, Charles Dobie wrote:
Bill Walsh
Warning: Use of the
document.write()method is strongly discouraged.As the HTML spec itself warns:
This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (e.g. if the string written is the string "
<plaintext>" or "<!--"). In other cases, the call can clear the current page first, as ifdocument.open()had been called. In yet more cases, the method is simply ignored, or throws an exception. Users agents are explicitly allowed to avoid executingscriptelements inserted via this method. And to make matters even worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged. Therefore, avoid usingdocument.write()— and if possible, update any existing code that is still using it.
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/401371ce-516d-4338-ab9e-6b158d4122ef%40superaje.com.
-- God is Great Beer is good Liberals are crazy!
Charles Dobie
This is typical waffle-babble from Mozilla -- ". . . . and if possible, update any existing code that is still using it."
They conveniently don't say what it should be updated to 🙁
Chas. Dobie.
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/c7a1a1b6-473f-44e1-b701-f8dd79b0db6c%40kctu.com.
Barry Carlson
Charlie,
On the subject of 'hover doesn't
work on touch screens', I went back and had a look again at
https://ngamotu.nz/olympics/ and found that I had made the link
to my email address clickable (only once) and it would display
for 8 seconds, though attempting to copy it proved to be
fruitless. Thereafter, those using a cursor could still view it,
but would need to copy it manually. As I earlier promised, I
need to go back and make the header of that table 'sticky' and
the viewport size the control factor for scrolling. That way it
will work properly in mobiles.
I'm attaching a .txt file, which
will be easier to view in a good text-editor if saved as a .js
file, i.e. some color differentiation.
It shows a copy of the .js file
I've used, though with a dummy email address etc.. , while there
is a fairly long Note in it detailing what each part does.
Barry
-------------------
Barry,
OK, thanks -- I figured you'd find a way. I'm surprised that 'they' haven't provided a secure way of presenting email addresses which will hide the actual text from robots.
Remember that 'hover' doesn't work on touch screens.
It's morning here -- we're off to the local farmers' market in the pouring rain. Oh, what fun!
Charlie.
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/591a201c-f553-47ee-9110-cea249423a2e%40gmail.com.
Bill Walsh
Pat Asher
I think the clearest explanation is in one of the stackoverflow pages you referenced, which says:
"
document.write writes to the
document stream. Calling document.write on a closed (or
loaded) document automatically calls document.open which will clear
the document.
document.write() has two
henchmen, document.open(), and document.close(). When the
HTML document is loading, the document is "open". When
the document has finished loading, the document has "closed".
Using document.write() at this point
will erase your entire (closed) HTML document and replace it with
a new (open) document. This means your webpage has erased itself
and started writing a new page - from scratch."
IOW, I am using document.write to insert HTML in the page as it opens/loads. Whereas your use of document.write to "do" something AFTER the page has loaded causes it to close then reload.
Anybody know if I'm right, or if I still need to worry.
Pat
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/558ca23e-6784-4ca1-a405-3389df36abe2%40superaje.com.
Pat Asher
Pat Asher
Barry Carlson
Pat and others;
I've had a look at what has been
happening with browser rendering of the document.write()
function, and found that if the script holding the function is
placed in the head of the page, or is available prior to the
completion of loading, the function will be honored. I found
references to Chrome not allowing document.write() to operate
post loading since ver. 55. I've tried running a post load
script in Firefox and it didn't work.
Many years ago, I created pages full of inline document.write() scripts mainly to do with navigation, and yes, they still run Okay.
For those interested, here is a page giving a simple demonstration of the insertAdjacentHTML method.
https://ngamotu.nz/test/add-html-text.html
Barry
-----------------
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/194eccc6-54bf-4c7b-a2c3-758a0aad6aa2%40att.net.
Charles Dobie
I use a paid version of "CSS HTML Validator". It does everything but butter my toast and pour my coffee. It validates the html, checks all internal and external links, checks for spelling errors in text, and much more.
I believe it also includes a fully functional text editor but I don't use it, opting for Ultraedit, which I've used for about 20 years.
It only warns me about document.write, but doesn't flag it as a hard error.
From what I've read about the problem, I think it is dangerous only to pages where the html is dynamically created by user input. Someone could insert malicious code into a form and submit it, creating havoc.
I think I've found an alternative method, I just have to test it now and discuss with Barry Carlson before I mention it here.
Later,
Charlie Dobie.
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/0dde0f12-6817-4b38-9689-dafc1e3fbbfc%40att.net.
beth.dj...@gmail.com
Pat, I was not laughing at the situation, just the words Charles used.
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/194eccc6-54bf-4c7b-a2c3-758a0aad6aa2%40att.net.
