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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
简单的三步vuex入门
May 20 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
微信小程序实现登录注册功能
Dec 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
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
javascript 对象的定义方法
2007/01/10 Javascript
JavaScript 继承详解 第一篇
2009/08/30 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
python 基于opencv实现图像增强
2020/12/23 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
采购内勤岗位职责
2013/12/10 职场文书
领导干部考察材料
2014/02/08 职场文书
师德师风个人反思
2014/04/28 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
这样写python注释让代码更加的优雅
2021/06/02 Python