有时候我们需要复用一个页面,但是又希望他们拥有各自的标题,这时候就需要动态的去更改页面的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)?的更多相关文章

  1. 怎样查看或修改网页的标题title

    网页的标题一般指的是 <title>标签之间的文本节点值, 它会显示在浏览器的标签页上, 我们可以通过 document.title 来查看或修改它: document.title; // ...

  2. Vue动态修改网页标题

    业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...

  3. 使用JS动态修改网页body的背景色

    大部分网页默认的背景色为白色,个人感觉比较刺眼,于是写了个JS的脚本去改变body部分的背景色,代码如下: // ==UserScript== // @name ChangeBackgroundCol ...

  4. jquery无法修改网页标题,无法修改网页标题

    今天遇到一个问题,搜索时动态修改网页标题,用jquery的这段代码无效,无论FF还是IE $("title").html("new title"); 后来只好用 ...

  5. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  6. 小程序block标签配合if和else 和 动态修改标题栏

    <block wx:if="{{aaaa}}"> <view>aaaa为 true,显示</view> </block> <b ...

  7. 网页标题(title)动态改变

    这是一只小白的突发奇想,实验多次终于有所效果.想要实现什么效果呢, 如图所示 :    要实现这个效果,大体需要两步. 第一,如何像打印似的一个一个字显示文字.要实现这个效果有多种方法.在这里我所运用 ...

  8. 基于Vue的SPA动态修改页面title的方法

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...

  9. 聊聊 Vue 中 title 的动态修改

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...

随机推荐

  1. URL加载页面的过程

    总体过程: 1.DNS解析 2.TCP连接 3.发送HTTP请求 4.服务器处理请求并返回HTTP报文 5.浏览器解析渲染页面 6.连接结束 一.DNS解析 在互联网中,每一台机计算机的唯一 标识是他 ...

  2. Java 多线程笔记

    资料来源于网络,仅供参考学习.   1.A Java program ends when all its threads finish (more specifically, when all its ...

  3. unity -- Time类(持续更新中)

    2018年了,新年总是会制定很多具体目标和计划,不管能否坚持去完成,初衷和决心总是要有的.本年第一篇博客终于开始下笔了,先立一些今年和公司业务无关的的flag: 1.希望每月或两月能看一套蛮牛游戏上的 ...

  4. springCloud系列教程01:Eureka 注册中心集群搭建

    springCloud系列教程包含如下内容: springCloud系列教程01:Eureka 注册中心集群搭建 springCloud系列教程02:ConfigServer 配置中心server搭建 ...

  5. jquery 怎么判断当前按钮是否是disabled 属性

    https://zhidao.baidu.com/question/1733097469792964827.html 应该用 prop("disabled") 有则返回true吧? ...

  6. 解决 react-router / react-router-dom v4 history不能访问的问题

    今天我把react-router 升级了一下, 在使用react-router-dom 是,子组件使用this.props.history 找不到了,看看官方文档,找了半天也没找到,因为我是在异步执行 ...

  7. StringMVC @RequestParam属性

    1.jsp: <a href="springmvc/testRequestParam?username=allen&age=sss">test RequsetP ...

  8. js 错误Error对象详解

    一.概念 error,指程序中的非正常运行状态,在其他编程语言中称为"异常"或"错误".解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信 ...

  9. css布局--水平居中

    一.水平居中 1. 使用text-align和display:inline-block实现水平居中 html <div class="parent"> <div ...

  10. JMeter插件之 BlazeMeter's XMPP----测试Openfire等

    JMeter也可以测试XMPP协议了,之前一直使用Tsung或者是直接写java代码结合Java request来进行,现在可以用BlazeMeter提供的插件来进行XMPP测试,无需过多编码. 首先 ...