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简单的弹出框有关闭按钮
May 05 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
微信小程序用户授权最佳实践指南
May 08 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程序中的常见漏洞进行攻击
2006/10/09 PHP
在普通HTTP上安全地传输密码
2007/07/21 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
js取整数、取余数的方法
2014/05/11 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python 3.x 新特性及10大变化
2015/06/12 Python
python去除字符串中的换行符
2017/10/11 Python
python在文本开头插入一行的实例
2018/05/02 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
python实现二分查找算法
2020/09/18 Python
python 模拟登录B站的示例代码
2020/12/15 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书