如何动态修改网页的标题(title)?
有时候我们需要复用一个页面,但是又希望他们拥有各自的标题,这时候就需要动态的去更改页面的title了,不然所有页面都是一个标题。
这时候就会想到使用js或jQuery去实现了。
1、js方式。
首先,我想到了使用document.getElementsByTagName()去获取页面的title标签,这是可以获取的。例如:
<title>标题</title>
<script>
var Title = document.getElementsByTagName('title')[0]
console.log(Title) // <title>标题</title>
</script>
然而,当我想用Title.title去获取或设置值时是不生效的。
获取title值: console.log(Title.title) 会发现是无法获取到值的
同理,设置网页title值: Title.title = 'hello world!' 会发现网页的标题也是没有被更改的
所以通过这种方法是无法获取和更改网页的title的。
其实,我们可以通过document.title来直接获取title值或者设置title值的
<title>标题</title>
<script>
document.title = 'hello world!'
</script>
结果:

可以发现这个办法是行得通的。
2、jQuery方式
<title>标题</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(function(){
$('title').html('hello!') // 此处也可以使用text()方法
})
</script>
如何动态修改网页的标题(title)?的更多相关文章
- 怎样查看或修改网页的标题title
网页的标题一般指的是 <title>标签之间的文本节点值, 它会显示在浏览器的标签页上, 我们可以通过 document.title 来查看或修改它: document.title; // ...
- Vue动态修改网页标题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- 使用JS动态修改网页body的背景色
大部分网页默认的背景色为白色,个人感觉比较刺眼,于是写了个JS的脚本去改变body部分的背景色,代码如下: // ==UserScript== // @name ChangeBackgroundCol ...
- jquery无法修改网页标题,无法修改网页标题
今天遇到一个问题,搜索时动态修改网页标题,用jquery的这段代码无效,无论FF还是IE $("title").html("new title"); 后来只好用 ...
- JS动态修改微信浏览器中的title
JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...
- 小程序block标签配合if和else 和 动态修改标题栏
<block wx:if="{{aaaa}}"> <view>aaaa为 true,显示</view> </block> <b ...
- 网页标题(title)动态改变
这是一只小白的突发奇想,实验多次终于有所效果.想要实现什么效果呢, 如图所示 : 要实现这个效果,大体需要两步. 第一,如何像打印似的一个一个字显示文字.要实现这个效果有多种方法.在这里我所运用 ...
- 基于Vue的SPA动态修改页面title的方法
最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...
- 聊聊 Vue 中 title 的动态修改
由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...
随机推荐
- [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第1讲(素材查找和界面框架搭建)
一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面 ...
- lesson - 1 笔记 网络连接 /putty 密钥登陆
---笔记 一.网络连接配置 1. 查看电脑ip 地址: ifconfig -a 2. 自动获取ip 地址: dhclient 默认BOOTPROTO=dhcp 和真机同一网段 3. 手动配置 ...
- COMPUTE子句和Group By
首先声明一下,这个COMPUTE语法在SQLServer 2012之后,就废弃使用了,详情请看https://msdn.microsoft.com/librar ...
- async await promise
async 异步函数,以后可能会用得很广. 1.箭头函数: 没有{ }时不写return 也有返回值 2.Promise : 异步神器,很多异步api都是基于Promise 3.new Promise ...
- python calendar(日历)模块
内置函数month() #!/usr/bin/python import calendar print calendar.month(2017,12) 输出: December 2017 Mo Tu ...
- Python之旅本地环境搭建
刚开始学习Python, 之后将会把Python相关的一些学习在此记录下来 . 毋庸置疑 ,我们需要先搭建本地开发环境, 为之后的Python开发做准备 ,这篇文章 ,将环境的搭建记录下来 第一步: ...
- webstorm工具的字体、主题等相关设置
Ctrl + /:单行注释Ctrl + Shift + /:块注释Ctrl + Alt + ↓:向下复制当前行Alt + ↑:向上移动Alt + ↓:向下移动Ctrl + D:删除当前行Ctrl + ...
- ajax介绍及使用
一.什么是ajax:(只刷新局部页面的技术) AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发 ...
- docker:(5)利用docker -v 和 Publish over SSH插件实现war包自动部署到docker
在 docker:(3)docker容器挂载宿主主机目录 中介绍了运行docker时的一个重要命令 -v sudo docker run -p : --name tomcat_xiao_volume ...
- 使用ControllerAdvice注意事项,Ambiguous @ExceptionHandler method mapped for [class org.springframework.web.bind.MethodArgumentNotValidException]
前言 ControllerAdvice非常好用,可以把系统内部的异常统一处理.用起来也很简单.比如,http://www.cnblogs.com/woshimrf/p/spring-web-400.h ...