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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
js实现div在页面拖动效果
May 04 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 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
yii通过小物件生成view的方法
2016/10/08 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
offsetParent 算法分析
2010/04/05 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
Python匹配中文的正则表达式
2016/05/11 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python多继承原理与用法示例
2018/08/23 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
会计职业生涯规划书
2014/01/13 职场文书
总经理任命书
2014/03/29 职场文书
认购协议书范本
2014/04/22 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
西岭雪山导游词
2015/02/06 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
2016猴年春节问候语
2015/11/11 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
SQL之各种join小结详细讲解
2021/08/04 MySQL
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
Python如何加载模型并查看网络
2022/07/15 Python