ITester软件测试小栈
25
2022-07
今天距2023年160天
ITester软件测试小栈第411次推文
点击上方蓝字“ITester软件测试小栈“关注我，每周一、三、五早上 09:00准时推送，每月不定期赠送技术书籍。
微信公众号后台回复“资源”、“测试工具包”领取测试资源，回复“微信交流群”、“内推群”一起进群打怪。
本文3440字，阅读约需7分钟
很多人应该知道在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。比如：
将以上代码贴到浏览器地址栏回车后alert正常执行，一个弹窗神现。
⚠️注意：如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码，sigh~
在非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>
实现效果如下所示：
很多时候我们从一个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
}
在一张HTML页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量，这意味着document.getElementById像人的智齿一样显得多余了。但实际项目中最好还是老老实实该怎么写就怎么写，毕竟常规代码出乱子的机会要小得多。
<div id="test"></div>
<script>
console.log(test)
</script>
我们可以通过将script标签的type属性设置为'text'，然后就可以在里面保存任意信息，后面在js中获取信息也十分的方便。
<script type="text" id="template">
<h1>欢迎关注公众号：ITester软件测试小栈</h1>
</script>
回复"资源"取干货个人微信：Cc2015123
添加请注明来意 :)
