有时候我们需要复用一个页面,但是又希望他们拥有各自的标题,这时候就需要动态的去更改页面的title了,不然所有页面都是一个标题。

  这时候就会想到使用js或jQuery去实现了。

  1、js方式。

  首先,我想到了使用document.getElementsByTagName()去获取页面的title标签,这是可以获取的。例如:

<title>标题</title>
<script>
var Title = document.getElementsByTagName('title')[0]
console.log(Title) // <title>标题</title>
</script>

  然而,当我想用Title.title去获取或设置值时是不生效的。

  获取title值: console.log(Title.title) 会发现是无法获取到值的

  同理,设置网页title值: Title.title = 'hello world!' 会发现网页的标题也是没有被更改的

  所以通过这种方法是无法获取和更改网页的title的。

  

  其实,我们可以通过document.title来直接获取title值或者设置title值的

<title>标题</title>
<script>
document.title = 'hello world!'
</script>

  结果:

    

  可以发现这个办法是行得通的。

  2、jQuery方式

<title>标题</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(function(){
$('title').html('hello!') // 此处也可以使用text()方法
})
</script>

  

  

  

如何动态修改网页的标题(title)?的更多相关文章

  1. 怎样查看或修改网页的标题title

    网页的标题一般指的是 <title>标签之间的文本节点值, 它会显示在浏览器的标签页上, 我们可以通过 document.title 来查看或修改它: document.title; // ...

  2. Vue动态修改网页标题

    业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...

  3. 使用JS动态修改网页body的背景色

    大部分网页默认的背景色为白色,个人感觉比较刺眼,于是写了个JS的脚本去改变body部分的背景色,代码如下: // ==UserScript== // @name ChangeBackgroundCol ...

  4. jquery无法修改网页标题,无法修改网页标题

    今天遇到一个问题,搜索时动态修改网页标题,用jquery的这段代码无效,无论FF还是IE $("title").html("new title"); 后来只好用 ...

  5. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  6. 小程序block标签配合if和else 和 动态修改标题栏

    <block wx:if="{{aaaa}}"> <view>aaaa为 true,显示</view> </block> <b ...

  7. 网页标题(title)动态改变

    这是一只小白的突发奇想,实验多次终于有所效果.想要实现什么效果呢, 如图所示 :    要实现这个效果,大体需要两步. 第一,如何像打印似的一个一个字显示文字.要实现这个效果有多种方法.在这里我所运用 ...

  8. 基于Vue的SPA动态修改页面title的方法

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...

  9. 聊聊 Vue 中 title 的动态修改

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...

随机推荐

  1. mybatis源码分析(一)

    mybatis源码分析(sqlSessionFactory生成过程) 1. mybatis框架在现在各个IT公司的使用不用多说,这几天看了mybatis的一些源码,赶紧做个笔记. 2. 看源码从一个d ...

  2. Java 向下转型

    1.Java 中父类直接向子类转型的不合法的,可以编译但运行时报错. Java中子类直接向父类转型 是合法的,但转型后,可以执行的方法仅限存在于父类中的,在执行时,先看子类的是否有定义,有就执行,没有 ...

  3. NumPy学习笔记 二

    NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...

  4. java 操作本地数据库 mysql

    单线程版 /** * */ import java.sql.*; import java.util.Date; import org.omg.CORBA.PUBLIC_MEMBER; /** * @a ...

  5. JS 中 cookie 的使用

    1.cookie 是什么? ①.cookie 是存储于访问者计算机中的变量.每当一台计算机通过浏览器来访问某个页面时,那么就可以通过 JavaScript 来创建和读取 cookie. ②.实际上 c ...

  6. 遍历文件 创建XML对象 方法 python解析XML文件 提取坐标计存入文件

    XML文件??? xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 里面的标签都是可以随心所欲的按照他的命名规则来定义的,文件名为roi.xm ...

  7. SQL基础学习_03_数据更新

    数据的插入 1. 基本INSERT语句     INSERT的基本语法为:     INSERT INTO  <表名> (列1, 列2, 列3,  -) VALUES (值1, 值2, 值 ...

  8. 腾讯WeTest发布《2017中国移动游戏质量白皮书》,专注手游品质提升

    1月8日,腾讯质量开放平台WeTest正式发布<2017中国移动游戏质量白皮书>. 刚刚过去的这一年,市场逐渐成熟,中国移动互联网由增量市场转向存量市场.中国移动游戏市场急剧变化,真正的精 ...

  9. form表单样式

    <BODY> <div id="modify-data"> <form class="modify-data-form"> ...

  10. Win10 MySQL-python

    在Windows 下调试 Python 还是挺麻烦的.通过PyCharm 来安装个MySQL-python 的库都搞了大半天.分别尝试 1.2.3,1.2.4和1.2.5都有不同的错误.需要解决的问题 ...