你可能不知道的7个前端冷知识，实用且有趣！

ITester软件测试小栈

发布于 2022-11-11 19:08:05

4580

发布于 2022-11-11 19:08:05

文章被收录于专栏：全栈测试

VOL 411

2022-07

今天距2023年160天

ITester软件测试小栈第411次推文

点击上方蓝字“ITester软件测试小栈“关注我，每周一、三、五早上 09:00准时推送，每月不定期赠送技术书籍。

微信公众号后台回复“资源”、“测试工具包”领取测试资源，回复“微信交流群”、“内推群”一起进群打怪。

本文3440字，阅读约需7分钟

Hi，大家好，我是CoCo。日常混迹于各大平台，Get了一些前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一起来接受前端的洗礼吧，今天主要介绍7个有趣的前端冷知识。

浏览器地址栏运行JavaScript代码

很多人应该知道在浏览器地址栏可以直接运行`JavaScript`代码，做法是以javascript:开头后跟要执行的语句。比如：

将以上代码贴到浏览器地址栏回车后alert正常执行，一个弹窗神现。

⚠️注意：如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码，sigh~

浏览器地址栏运行HTML代码

在非IE内核的浏览器地址栏可以直接运行HTML代码，比如在地址栏输入以下代码然后回车运行，会出现指定的页面内容。

data:text/html,<h1>Hello, ITester!</h1>

效果如下所示：

浏览器秒变编辑器

将以下代码复制粘贴到浏览器地址栏，运行后浏览器就变成了一个原始简单的编辑器，HTML5中新加的contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。和window自带的notepad差不多，长见识了吧，话不多说，一起来试试。

data:text/html, <html contenteditable>

效果如下所示：

同理，在控制台执行以下代码，同样可以将整个页面变得可以编辑。

document.body.contentEditable='true';

效果如下所示：

实时编写样式的输入框

利用HTML5中的contenteditable属性，巧妙的在body增加一个可编辑的style标签。

<body>
  <style style="display:block; position: fixed;" contentEditable>
    body { background: red; }
  </style>
</body>

实现效果如下所示：

利用a标签解析URL

很多时候我们从一个URL中提取域名，查询关键字，变量参数值等的需要,然而处理 url 字符串是比较麻烦的，可以使用 a 标签自动解析 url。

主要方法就是在JS中创建一个a标签，然后将需要处理的URL赋值给我们新创建的a标签的href属性，然后就可以得到我们想要的东西了。

var a = document.createElement('a');
a.href = 'https://mp.weixin.qq.com/s/zRXJj-2O3jcKHkNZKyPNXQ';
console.log(a.host);

效果如下所示：

利用这一方法，稍微进行封装一下，就可以得到一个非常实用的工具函数。

function urlParse(url, key) {
  var a = document.createElement('a')
  a.href = url
  var result = {
    href: url,
    protocol: a.protocol.replace(':', ''),
    port: a.port,
    query: a.search,
    params: (function(){
      var ret = {}, centArr,
        seg = a.search.replace(/^\?/, '').replace(/^\?/,'').split('&')
      for (i = 0, len = seg.length; i < len; i ++) {
        if (!seg[i]) { continue }
        centArr = seg[i].split('=')
        ret[centArr[0]] = centArr[1]
      }
      return ret
    }()),
    hash: a.hash,
    file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
    path: a.pathname.replace(/^([^\/])/, '/$1'),
    relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
    segments: a.pathname.replace(/^\//, '').split('/')
  }
  a = null
  return key ? result[key] : result
}

带有Id属性的元素，会创建全局变量

在一张HTML页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量，这意味着document.getElementById像人的智齿一样显得多余了。但实际项目中最好还是老老实实该怎么写就怎么写，毕竟常规代码出乱子的机会要小得多。

<div id="test"></div>
<script>
    console.log(test)
</script>

Script标签保存任意信息

我们可以通过将script标签的type属性设置为'text'，然后就可以在里面保存任意信息，后面在js中获取信息也十分的方便。

<script type="text" id="template">
 <h1>欢迎关注公众号：ITester软件测试小栈</h1>
</script>

以上就是今天的全部内容，希望对大家有所帮助，也希望大家多多留言、点赞、在看、转发四连爱❤️ 支持。咱们下篇文章见，Bye~👋

以上

That‘s all

更多系列文章

敬请期待

ITester软件测试小栈（ID：ITestingA），专注于软件测试技术和宝藏干货分享，每周准时更新原创技术文章，每月不定期赠送技术书籍，愿我们在更高处相逢。喜欢记得星标⭐我，每周及时获得最新推送，第三方转载请注明出处。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-07-25，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自 ITester软件测试小栈微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度