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 textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
ES6关于Promise的用法详解
May 07 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Django框架视图函数设计示例
2019/07/29 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
与UNIX有关的几个名词
2015/09/17 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技