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 keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
js 模拟气泡屏保效果代码
Jul 10 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
JSONObject使用方法详解
Dec 17 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
element中的$confirm的使用
Apr 26 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JavaScript错误处理
2015/02/03 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
班级文化标语
2014/06/23 职场文书
施工安全责任书范本
2014/07/24 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python