Question

我试图在2秒（2000毫秒）后动态更改页面标题。

以下是我尝试的代码：

<!DOCTYPE HTML>
<html>
<head>
<title>Before</title>
</head>
<body onload="updateTitle">
<script>
var title = document.getElementsByTagName('title');
function updateTitle() {
//Here is some kind of delay (of 2 seconds). I have tried setTimeout(), setInterval() and delay()
title.innerHTML = "After";
</script>
Dummy Content for Body
</body>
</html>

如何修改它以便在2秒后页面标题发生变化？

Answer 1

要更改标题，您应该使用window.title

window.title = 'After';

如果您绝对必须使用document.getElementsByTagName，请注意它会返回元素的数组，您需要首先使用它们。即。

document.getElementsByTagName('title')[0].innerHTML = 'After';

当然，如果页面没有<title>元素，则上述操作会导致错误。第一个（window.alert）将适用于任何一种情况。

<强>延迟

为了介绍延迟，您可以使用setTimeout（就像您已经完成的那样）

<script>
function updateTitle() {
    setTimeout(function() {
        window.title = 'After';
    }, 2000);
}
</script>

整页工作代码：

请注意，包含updateTitle()的块已移至。问题是，当浏览器试图将它绑定到updateTitle()时（在解析页面时），函数onload尚未定义 - 因为它是在体内进行定义的。

<!DOCTYPE html>
<html>
<head>
<title>Before</title>
<script>
function updateTitle() {
    setTimeout(function() {
        document.getElementsByTagName('title')[0].innerHTML = 'After';
    }, 2000);
}
</script>
</head>
<body onload="updateTitle()">
Dummy Content for Body
</body>
</html>

一段时间后更改页面标题

1 个答案: