how to change the title of the html webpage while it is loading to "loading..."?

Question

I have been trying to write a page where the title of the page changes to "loading.../" (0.25 seconds break) then "loading...|" (0.25 seconds break) and then again to "loading..." as long as the page doesn't fully load. So I wrote this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Something here...">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">something here</title>
    <script src="home.js"></script>
    <link rel="icon" type="icon" href="img/xyz.jpg">
</head>
<body>
something here...

<iframe width="560" height="315" src="https://www.youtube.com/embed/tLQLa6lM3Us" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

home.js:

function sleep(time){
    return new Promise(resolve => setTimeout(resolve, time*1000));
}

if (document.readyState !== "complete") {
    () => {
        document.getElementsByTagName("title") = "loading.../" //tried both getElementById and getElementByTagName
        sleep(0.25)
        document.getElementsByTagName("title") = "loading...|"
        sleep(0.25)
        document.getElementsByTagName("title") = "loading...\\"
        sleep(0.25)
    }
}

But it doesn't seem to work. I added the iframe tag to make sure the page loads, takes some time to load, but the title is still the same.

how to change the title of the html webpage while it is loading to "loading..."?

0 Answers0