javascript修改浏览器title方法 JS动态修改浏览器标题


Posted in Javascript onNovember 30, 2017

title在html中属于特殊的节点元素.因为它可以使用document.getElementsByTagName("title")[0]来获取网页的title标签,但却无法用document.getElementsByTagName("title")[0].innerHtml用更改它的值。经测试原生js有两种方式可以修改,jQuery中也能简单设置。不清楚的小伙伴们可以了解一下。

innerText 方式

通过console.log(document.getElementsByTagName("title")[0]),发现能打印出<title>标签,标签里面只有文字节点,故猜测只能识别TextNode,所以用innerText方式设置title的值,果然成功了。

document.getElementsByTagName("title")[0].innerText = '需要设置的值';

document.title方式

经过测试,还可通过document.title 设置title的值。

console.log(document.title);      # 可以获取title的值。
document.title = '需要设置的值';    # 设置title的值。

例子

window.onfocus = function () {
 document.title = '恢复正常了...';
};
window.onblur = function () {
 document.title = '快回来~页面崩溃了';
};

我们在浏览器取得了焦点和失去焦点的时候改变title的值,可以发现切换浏览器选项卡的时候,title发生了改变。

jQuery方式

当然如果你的项目里面依赖jQuery,可以使用jq的方法设置

$('title').html('')

$('title').text('')

jq中两种方式都可以实现

总结

原生js中我们可以通过 innerText , document.title 两种方式动态修改网页的title .

jq中我们可以通过 $('title').html('') 或者 $('title').text('') 进行修改。

以上就是JS更改浏览器TITLE的详细方法,感觉有用就收藏一下吧。

Javascript 相关文章推荐
datagrid框架的删除添加与修改
Apr 08 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
vue组件发布到npm简单步骤
Nov 30 #Javascript
JS和JQuery实现雪花飘落效果
Nov 30 #jQuery
vue 添加vux的代码讲解
Nov 30 #Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 #Javascript
Vue+Vux项目实践完整代码
Nov 30 #Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 #Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 #Javascript
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP header函数分析详解
2011/08/06 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
深入解析koa之中间件流程控制
2019/06/17 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python读取二进制mnist实例详解
2017/05/31 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
优秀毕业生自荐信范文
2014/01/01 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
学用政策心得体会
2014/09/10 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android