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的无刷新分页技术
Jun 11 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
js友好的时间返回函数
Aug 24 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
js下载文件并修改文件名
May 08 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
基于javascript实现移动端轮播图效果
Dec 21 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
如何将数据从文本导入到mysql
2006/10/09 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
js实现踩五彩块游戏
2020/02/08 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
后勤主管工作职责
2013/12/07 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
岗位工作说明书
2014/07/29 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
入党培养人考察意见
2015/06/08 职场文书
婚宴父亲致辞
2015/07/27 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
Java线程的6种状态与生命周期
2022/05/11 Java/Android