如何动态修改网页的标题(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 一 ...
随机推荐
- readAsDataURL(file) & readAsText(file, encoding)
readAsDataURL(file)会把文件内容转换为data类型的URL: data:text/plain;base64,b3JkZXItaWQJb3JkZXItaXRlbS1p... 这种d ...
- vue2.0的瀑布流组件-使用说明
做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import v ...
- php SeasLog使用以及liunx环境下安装
1.下载SeasLog http://pecl.php.net/package/SeasLog php官方 https://github.com/Neeke/SeasLog 作者的github 2. ...
- Lambda 表达式,Java中应用Lambda 表达式
一.Lambda 表达式 简单来说,编程中提到的 lambda 表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数. 链接:知乎 先举一个普通的 Python 例 ...
- JavaMail开发教程01开山篇
序 其实想写JavaMail这一系列的博客已经有一个月之久了,缘起是某次乱逛传智播客官网浏览到相关的视频教程,想起大学时代学过的计算机网络提到邮件相关的协议,但遗憾的是到目前为止还没有接触计算机网络编 ...
- 基于web的网上书城系统开发-----需求分析
网上书店管理系统主要针对中小型书店,图书管理员将图书信息整理归类发布到网上.,用户登录该网站后进行浏览图书信息.购买等活动. 前台客户输入的数据交给后台数据库处理并及时反馈给双方.客户和管理者拥有相应 ...
- eclipse环境下日志打印输出
1.先将jdk配置一下 选Preferences---- 找到自己的jdk所在的位置 2.配置Tomcat window-----preferences------- 找到自己的tomcat所在位置 ...
- Java中的String类能否被继承?为什么?
不能被继承,因为String类有final修饰符,而final修饰的类是不能被继承的. Java对String类的定义: public final class String implements ja ...
- pl/sql command window 初步接触
pl/sql command window基本操作 PL/SQL Developer应用两年了,今天第一次应用command window. command window类似于sqlplus窗口: 1 ...
- Python进阶内容(五)--- type和object的关系
面向对象编程(OOP)的两大关系 继承与实现 继承关系: 子类继承自父类(base),可以使用父类的一些方法(method)和属性(attribute) 实现关系: 以类为模板,实例化一个对象,即:对 ...