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 相关文章推荐
js 函数调用模式小结
Dec 26 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
详解javascript函数的参数
Nov 10 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
微信小程序删除处理详解
Aug 16 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
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
PHP生成RSS文件类实例
2014/12/05 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python 在函数上添加包装器
2020/07/28 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
Python之matplotlib绘制折线图
2022/04/13 Python
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript