您现在的位置是：亿华云 > IT科技类资讯

前端开发中这些小技巧，你知道几个？

亿华云2025-10-03 15:58:07【IT科技类资讯】4人已围观

简介浏览器地址栏运行JavaScript代码javascript:alert(hello!); Firefox不支持；其他浏览器必须手动输入才可执行；浏览器地

浏览器地址栏运行JavaScript代码

javascript:alert(hello!); Firefox不支持；其他浏览器必须手动输入才可执行；

浏览器地址栏运行HTML代码

data:text/html,前端<h1>Hello, world!</h1> 在非IE浏览器可以运行

浏览器变成文本编辑器

地址栏输入：

data:text/html, <html contenteditable>

控制台输入：

document.body.contentEditable=true;

利用a标签自动解析URL

var a = document.createElement(a); a.href = https://www.maomin.club; console.log(a.host); // www.maomin.club

页面拥有ID的元素会创建全局变量

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="app">我是源码下载内容</div> <script type="text/javascript"> console.log(app.textContent) // 我是源码库内容 </script> </body> </html>

引用CDN文件时，服务器租用不用HTTP标识

利用script标签保存任意信息

在页面中隐藏鼠标

*{ cursor: none!important; }

文字模糊效果

p { color: transparent; text-shadow: #111 0 0 5px; }

实时编辑CSS

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> style{ display: block; } </style> </head> <body> <style contentEditable> body { color: blue } </style> </body> </html>

实现长宽比固定区域

<div style="width: 100%; position: relative; padding-bottom: 56.25%;"> <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;"> this content will have a constant aspect ratio that varies based on the width. </div> </div>

禁止他人使用iframe标签引用网址

if (window.location != window.parent.location) window.parent.location = window.location;

生成随机字符串

function generateRandomAlphaNum(len) { var rdmString = ""; for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0,中小知道 len); }