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 相关文章推荐
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
原生js实现轮播图
Feb 27 Javascript
js下载文件并修改文件名
May 08 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
传智播客学习之java 反射
2009/11/22 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
实习指导老师评语
2014/04/26 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书