skip to Main Content

I know this is a duplicate question, but I’ve tried a few approaches and I’m not able to get the solution I need.
I need to change the title of a web page, and I thought Javascript would be a good candidate. I’ve read many disapproving comments already, talking about how changing the title will negatively affect SEO-I’m not worried about that just now.
I’m able to change the title by reassigning a value in an inline script:

<input type="button" value="Click me." onclick="document.title = 'Some new title';" />

But using an inline script in this case is out of the question. I tried loading an embedded script tag above & below the body of the script, no go. This is what I settled on, and it didn’t work initially (keep reading):

<script>
document.addEventListener("load", function changeTitle(){
    document.title = "FUBAR";
}, true);
</script>

I’ve tried adding/removing the ‘true’ value at the end of the parameter list and that doesn’t change anything. I avoided naming the function, then named it, and that didn’t change anything. What DID work was changing “load” to “click”. I need the title to change right after the document is finished loading…is there something else I can use, like “ready”, or “onload”? Using “load” yielded no results, but I swear I’ve seen it used before.

Thanks!

2

Answers


  1. No need to wait for the load event. Just set the title:

     <html>
     <head></head>
     <body>
     <script>document.title = "foobar"</script>
     <!-- rest of document -->
    
    Login or Signup to reply.
  2. Try using
    window.addEventListener rather than document.addEventListener

    See
    https://developer.mozilla.org/en-US/docs/Web/Events/load

    Note: More reliable is to add event listener on
    “window.addEventListener”.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search