有时候我们需要复用一个页面,但是又希望他们拥有各自的标题,这时候就需要动态的去更改页面的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. readAsDataURL(file) & readAsText(file, encoding)

      readAsDataURL(file)会把文件内容转换为data类型的URL: data:text/plain;base64,b3JkZXItaWQJb3JkZXItaXRlbS1p... 这种d ...

  2. vue2.0的瀑布流组件-使用说明

    做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import v ...

  3. php SeasLog使用以及liunx环境下安装

    1.下载SeasLog http://pecl.php.net/package/SeasLog php官方 https://github.com/Neeke/SeasLog 作者的github  2. ...

  4. Lambda 表达式,Java中应用Lambda 表达式

    一.Lambda 表达式 简单来说,编程中提到的 lambda 表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数. 链接:知乎 先举一个普通的 Python 例 ...

  5. JavaMail开发教程01开山篇

    序 其实想写JavaMail这一系列的博客已经有一个月之久了,缘起是某次乱逛传智播客官网浏览到相关的视频教程,想起大学时代学过的计算机网络提到邮件相关的协议,但遗憾的是到目前为止还没有接触计算机网络编 ...

  6. 基于web的网上书城系统开发-----需求分析

    网上书店管理系统主要针对中小型书店,图书管理员将图书信息整理归类发布到网上.,用户登录该网站后进行浏览图书信息.购买等活动. 前台客户输入的数据交给后台数据库处理并及时反馈给双方.客户和管理者拥有相应 ...

  7. eclipse环境下日志打印输出

    1.先将jdk配置一下 选Preferences---- 找到自己的jdk所在的位置 2.配置Tomcat window-----preferences------- 找到自己的tomcat所在位置 ...

  8. Java中的String类能否被继承?为什么?

    不能被继承,因为String类有final修饰符,而final修饰的类是不能被继承的. Java对String类的定义: public final class String implements ja ...

  9. pl/sql command window 初步接触

    pl/sql command window基本操作 PL/SQL Developer应用两年了,今天第一次应用command window. command window类似于sqlplus窗口: 1 ...

  10. Python进阶内容(五)--- type和object的关系

    面向对象编程(OOP)的两大关系 继承与实现 继承关系: 子类继承自父类(base),可以使用父类的一些方法(method)和属性(attribute) 实现关系: 以类为模板,实例化一个对象,即:对 ...