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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
javascript document.images实例
May 27 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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报表之jpgraph柱状图实例代码
2011/08/22 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
台湾生鲜宅配:大口市集
2017/10/14 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
教育专业个人求职信
2013/12/02 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
学术会议主持词
2014/03/17 职场文书
企业文化建设实施方案
2014/03/22 职场文书
大型营销活动计划书
2014/04/28 职场文书
活动总结书
2014/05/08 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
护理专业自我评价
2015/03/11 职场文书
党员带头倡议书
2015/04/29 职场文书
正规借条模板
2015/05/26 职场文书
红高粱观后感
2015/06/10 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书