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 While 循环基础教程
Apr 05 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
js实现本地时间同步功能
Aug 26 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 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以ROOT权限执行系统命令的方法
2011/02/10 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
js中less常用的方法小结
2017/08/09 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
Python切片用法实例教程
2014/09/08 Python
Python3.4解释器用法简单示例
2019/03/22 Python
python实现趣味图片字符化
2019/04/30 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
如何定义TensorFlow输入节点
2020/01/23 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Python中如何添加自定义模块
2020/06/09 Python
行政专员岗位职责
2014/01/02 职场文书
解除租房协议书
2014/12/03 职场文书
婚礼家长致辞
2015/07/27 职场文书
消防安全培训工作总结
2015/10/23 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
Python中常见的导入方式总结
2021/05/06 Python
python实现双链表
2022/05/25 Python