更新于 

html

Web/API

shadow dom

ShadowRoot

公司的项目用的是jquery框架，
组件封装用的是HTMLElement，
组件内部的结构全部使用shadowRoot进行包装。

HTMLElement自定义组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class MyHello extends HTMLElement{
    constructor() {
        super();
        // 创建组件的 Shadow DOM
        this.attachShadow({mode:'open'})
        // 创建组件内部的元素
        const container = document.createElement('div')
        container.setAttribute('class', 'container')
        const content = `
            <img width="100px" src="./img/toby_dog.jpg" alt="">
            <div class="li-content">
                <p class="li-title">List Tag</p>
                <p class="li-content">List Content</p>
            </div>
        `
        container.innerHTML = content
        // 样式设置
        const style = document.createElement('style')
        style.textContent = `
            .container{
                border:1px solid #000;
                display:flex
            }
            .li-content{
                border:1px solid #000;
            }
            .li-title{
                font-weight:bold
            }
            .li-content{
            }
        `
        // 将元素添加到Shadow DOM中
        this.shadowRoot.appendChild(container)
        this.shadowRoot.appendChild(style)
    }
}
// 注册自定义组件
customElements.define('my-hello', MyHello)


1
2
3
4
5
6
<head>
    <script src="components/my_hello.js"></script>
</head>
<body>
    <my-hello></my-hello>
</body>

FullScreen 全屏API

实现网站自动全屏

目前还没有找到可以实现的方法，
网站要想进入全屏必须得要交互触发，
否则在调用requestFullscreen时会返回报错：

1
2
3
TypeError: Permissions check failed
  at HTMLHeadingElement.toggleFullscreen (index.html:68:31)
  at index.html:79:50

看了几个stackoverflow的高赞回答，主要也是劝放弃这种需求：

这种设计是出于安全和交互性的考虑，

也有回答说如果真的想要实现这种强制全屏显示的页面，
可以使用类似SPA网站的设计，
用户点击页面后通过全屏同一页面的iframe模仿假页面切换并全屏显示交互效果

API实现和键盘全屏冲突问题

问题描述

屏幕上有个按钮控制页面全屏，
非全屏状态下点击变为全屏，
全屏状态下点击退出全屏，

按钮的样式显示当前页面是否是全屏状态，

同时也要兼顾浏览器按F11和Esc切换全屏的功能。

设置了一个变量记录当前是否全屏，

在非全屏状态下，可以通过keydown事件监听F11的键入，
但是在全屏状态下，浏览器无法监听到keydown事件（？？？）

如何解决？

解决方式

参考博客

当然也可以直接在监听keydown事件，F11键入时，执行e.preventDefault()，
阻止F11的全屏，只用单一入口控制是否全屏，
但是如果同时要保留F11和Esc的功能，要如何解决

标签

img

img标签图片自适应

问题描述

使用img标签展示图片时，一直不知道如何实现调整图片尺寸的同时保持原始长宽比。
以往都是用css里的background-img来实现这一功能， 这个问题一直都没解决。
之前听说如果在img标签上只设置width，即可保持长宽比，但是好像没什么用。

解决方法
https://blog.csdn.net/z2181745/article/details/114919271https://blog.csdn.net/z2181745/article/details/114919271

使用css中的object-fit属性，
类似于background-size属性
可以控制img标签展示图片的模式，可选值有：

fill|contain|cover|scale-down|none|initial|inherit;

input

input:file上传同一个文件时，change不触发

问题描述

在使用input:file时，一般会绑定一个onChange事件，用来监听文件上传事件，
但是如果反复上传同一份文件，只有第一次上传会触发change事件。

解决方法
https://blog.csdn.net/chelen_jak/article/details/89358075https://blog.csdn.net/chelen_jak/article/details/89358075

上传的文件路径会被存储在 $event.target.value中，
因此需要每次都将 $event.target.value 清空：

1
2
3
function change(e){
    e.target.value = null
}

video

video标签无法自动播放

问题描述

video标签已经设置了autoplay属性，视频依旧无法自动播放

解决方案

参考博客：video 标签无法自动播放

需要把muted属性和autoplay属性一起配置上去:

1
<video src="./citywalk.mpp4" autoplay muted></video>

video加载blob格式视频

问题描述

meta

移动端浏览器如何去掉头部导航栏

是谁还在做浏览器上运行的移动端网页，这个问题真的有解决的必要吗？

而且不同的浏览器的去除方式还都有可能不一样，放弃这个功能吧。

https://blog.csdn.net/hbcui1984/article/details/8350107
https://segmentfault.com/a/1190000018559886
https://www.jianshu.com/p/61e324e0efa2

Page-Enter/Page-Exit 控制页面进入退出效果

插入Page-Enter/Page-Exit无效
1
2
3
4
5
<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=10.5)" />
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)" />
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=3, transition=9)">
<Meta http-equiv=”Page-Enter” Content=”revealTrans(duration=x, transition=y)”>
<Meta http-equiv=”Page-Exit” Content=”revealTrans(duration=x, transition=y)”>

移动端浏览器自定义导航栏

目前似乎只能设置颜色，
通过设置页面meta头的theme-color：

1
<meta name="theme-color" content="#ff0000"/>