乐趣区

关于javascript:禁止浏览器-title-属性的默认效果

jiezi

正好答复了一个问题，浏览器哪个事件里能够 禁止 浏览器对 title 显示默认行为？。

明天整顿一下相干的测试 demo。

剖析问题

先找一下关键词，从外面找一下解决问题的思路。

  1. ssr
  2. title
  3. 默认行为
  4. seo
  5. 自定义 tooltip 行为

解决问题

阻止浏览器默认行为（失败了）

event.preventDefault() 能够用来阻止浏览器的默认行为，比如说 onsubmit 表单提交、onkeydown 键盘输入、<a> 页面跳转等等。

那么 title 行为能够阻止吗？在什么事件中能够阻止？

因为咱们也不确定什么事件能够，索性咱们 间接笼罩所有事件。

a = document.createElement('a')

// eventList 寄存所有能够触发的事件
eventList = [];

// 通过 for i 的个性，咱们把 on 结尾的全副存起来。for(var i in a) /^on/.test(i)&&eventList.push(i);
// console.log(eventList)

// 阻止默认事件
preventDefaultFun = e => {e.preventDefault(),console.log(e.type)};
// 绑定所有事件
eventList.forEach(v=>a[v]=preventDefaultFun)

// 减少内容，追加到 DOM 中测试
a.title = 'www.lilnong.top'
a.innerText = '微信公众号：前端 linong'
document.body.appendChild(a)

能够看到，title 的默认行为还是触发了，所以 通过事件阻止默认行为失败了。

css 阻止

  1. shadow DOM 咱们通过这个能够实现一些成果，暗藏 <video> 的下载性能，暗藏 <input type="number"> 的右侧按钮。然而 title 不属于这部分，所以无法控制。
  2. pointer-events 通过设置为 none 确实能够阻止 title，然而也无奈接管事件了。

js 阻止

js 计划必定是 兼容性最好的办法，咱们再来看看题目，Vue 的 ssr 为了 seo 给标签减少了 title。

那么咱们能够有针对性的提出几个计划：

  1. 钩子函数移出 title 属性。（个人感觉很棒，简略间接）
  2. 实现 hover 成果，移除 title 属性。（有点鸡肋）
  3. 笼罩标签、或者标签替换等计划。（特地鸡肋）

SSR 的生命周期钩子函数

组件生命周期钩子函数

生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用。其余生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。

SEO 抓取 & 搜索引擎的爬虫蜘蛛

有个常识性的货色：抓取的只是动态的 HTML。
不晓得有杠精没，我简略说一下吧：因为只抓取动态的，所以咱们一般的 Vue 渲染的页面是不会抓取的，所以才要应用 SSR 服务端渲染这个计划。

基于这个常识，咱们 js 操作 DOM 不会影响 SEO。

实现计划（mounted 钩子移除）

基于下面的逻辑，那么咱们就能够在 mounted 中把所有 title 暗藏就好了。
这样用户应用的时候就是一个没有 title 属性的标签，也就不会有默认成果了。

<a :title="isShowTitle&&title"></a>

data: {
    isShowTitle: true,
    title: 'https://www.lilnong.top'
},
mounted(){this.isShowTitle = false}

实现计划（hover 成果）

mouseenter、mouseleave 动静的移除和增加 title 属性。
如果感觉绑定事件太简单，能够用原生应用事件委托来搞。

实现计划（jquery& 原生 用选择器来移除）

$('[title]') 和 document.querySelectorAll('[title]') 就能够获取到所有存在 title 属性的标签。而后遍历把 title 属性移除就能够

微信公众号：前端 linong

欢送大家关注我的公众号。有疑难也能够加我的微信前端交换群。

退出移动版