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 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
JS 控件事件小结
Oct 31 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
express框架下使用session的方法
Jul 31 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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
mysql limit查询优化分析
2008/11/12 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python中正则的使用指南
2016/12/04 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
如何利用python读取micaps文件详解
2020/10/18 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
倡议书范文格式
2014/05/12 职场文书
2014年关工委工作总结
2014/11/17 职场文书
统计员岗位职责
2015/02/11 职场文书
合同审查法律意见书
2015/06/04 职场文书
婚礼家长致辞
2015/07/27 职场文书
教师听课学习心得体会
2016/01/15 职场文书