网页加载时动态改变TITLE的名称

最新推荐文章于 2024-05-13 16:26:52 发布

梦醒在笑

最新推荐文章于 2024-05-13 16:26:52 发布

阅读量2k

点赞数 1

分类专栏： JAVASCRIPT 文章标签： javascrip 脚本 html

本文链接：https://blog.csdn.net/mengsandy/article/details/24733713

版权

JAVASCRIPT 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

刚开始我遇到这个问题的时候，我最开始想到的办法，是用innerHTMLp这个属性来动态的改变页面的标题，可是我试了几次，每次都还是改变不了页面的标题的值。

于是就在网上查了一下相关的资料。先大概介绍一下，innerHTML、innerText、outerHTML这些属性的区别。平时没事尽量用innerHTML，因为大多数浏览器支持这个，innerText据说只有IE支持。

1.innerHTML

这个就是字符串里面可以包括HTML标签的。

例如 var msg = "一段字符";

这里面的这个标签也是会显示出来的。

结果为"一段字符";。

2.innerText

字符串里面要是包括HTML标签的话，会当成标签给翻译了，字符串里面是不会显示的。

结果为"一段字符";

3.outerHTML

和innerHTML类似，但是这个会把这个字符串外面的一层标签也显示出来。

再介绍一下innerHTML的适用范围。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="titelname">无标题文档</title>
<script language="javascript">
 function test(){
	var titleName = document.getElementById("testInnetHTML");
	//var titleName = document.getElementById("titelname");
	alert(titleName.innerHTML);
	titleName.innerHTML = "<p>改变后的值</p>";
	//titleName.innerHTML = "改变后的标题的值";
	alert(titleName.innerHTML);
	}
</script>
</head>
<body>

<div id="testInnetHTML">起初的值</div>
<input type="button" οnclick="test()" value="改变"/>
</body>
</html>

以上的代码是可以改变"testInnetHTML”里面的值的。
但是当我想改变"titelname"里面的值的时候是怎么也改不了的。

脚本走到

titleName.innerHTML = "改变后的标题的值";

这一行代码的时候就不走了。以下的就不执行了。

我发现innerHTML这个属性是可以读出head、title、body标签的值，但是head、title里面的内容是改不了，可能是因为head、title是页面原始的标签，写了保护不让随便改。但是body里面的值是可以改的。

<html >
<head id = "headName">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="titelname">无标题文档</title>
<script language="javascript">
 function test(){
	var titleName = document.getElementById("bodyName");
	alert(titleName.innerHTML);
	titleName.innerHTML = "BODY里面的值都改变了";
	alert(titleName.innerHTML);
	}
</script>
</head>
<body id="bodyName">

<div id="testInnetHTML">起初的值</div>
<input type="button" οnclick="test()" value="改变"/>
</body>
</html>

最后的解决办法，就是用document.title这个办法改变title的值了。

<html >
<head id = "headName">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="titelname">无标题文档</title>
<script language="javascript">
 window.οnlοad=function test(){
 var titleName = document.getElementsByTagName("title")[0];
	alert(titleName.innerHTML);
	document.title ="new标题";
	alert(titleName.innerHTML);
	}
</script>
</head>
<body id="bodyName">
页面什么都没有
</body>
</html>