Skip to content

Instantly share code, notes, and snippets.

View ufologist's full-sized avatar

Sun ufologist

299 followers · 194 following
View GitHub Profile
@ufologist
ufologist / watermark.html
Created July 9, 2019 07:37
简易水印
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简易水印</title>
<style>
html,
body {
@ufologist
ufologist / generate-wx-headimgurl-dom-image.html
Created February 20, 2019 10:16
生成带微信头像的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>生成带微信头像的图片</title>
</head>
<body>
<div class="js-draw-content">
@ufologist
ufologist / ios-body-click-bubble-bug.html
Created September 19, 2017 09:06
iOS body click 事件冒泡的 bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iOS body click 事件冒泡的 bug</title>
</head>
<body>
<h1>点击 h1 不会冒泡到 body</h1>
@ufologist
ufologist / wave-animation.html
Created April 24, 2017 15:31
wave animation | 波浪动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>wave animation | 波浪动画</title>
<style>
.banner-box {
position: relative;
@ufologist
ufologist / mobile-hls-video.html
Last active September 21, 2023 09:01
Web 前端如何播放 HLS(.m3u8) 视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mobile HLS video</title>
</head>
<body>
<h1>Mobile HLS video</h1>
@ufologist
ufologist / blur-filter-bug.html
Created March 13, 2017 09:43
blur filter 动画完成后造成内容被裁剪(显示不全)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>blur filter 动画完成后造成内容被裁剪(显示不全)</title>
<style>
@-webkit-keyframes anim1 {
0% {
@ufologist
ufologist / jquery-sanitize-html.html
Last active March 26, 2023 00:07 — forked from kaznum/gist:3810258
sanitize HTML with jQuery prevent Application from XSS attacks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Sanitize HTML with jQuery</title>
</head>
<body>
<h1>Sanitize HTML with jQuery</h1>
<h2>HTML Code</h2>
@ufologist
ufologist / overscroll.html
Created November 30, 2016 05:35
overscroll - prevents the scroll from "passing through" to the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overscroll - prevents the scroll from "passing through" to the body</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html,
body {
height: 100%;
@ufologist
ufologist / page-b.html
Created October 12, 2016 07:17
iframe 页面中的链接可以让父级页面重定向, 要防止这种情况, 可以通过 iframe 的 sandbox 属性来控制.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面 B</title>
</head>
<body>
<h1>页面 B</h1>
<ul>
<li><a href="http://baidu.com">X度</a></li>
@ufologist
ufologist / a-domain.html
Created August 8, 2016 08:05
跨域通信机制 - postMessage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a-domain</title>
</head>
<body>
<h1>跨域通信机制 - postMessage</h1>
<h2>a-domian.html</h2>
<iframe class="js-iframe" src="http://localhost:3000/other-domain.html"></iframe>