【日常项目问题记录】

1.window api

1. window.atob() 用于解码使用 base-64 编码的字符串
2. window.btoa() 用于创建一个 base-64 编码的字符串。该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。

2.mate http-equiv

1. http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"
   让浏览器把一个网站所有的不安全 URL（通过 HTTP 访问）当做已经被安全的 URL 链接（通过 HTTPS 访问）替代。这个指令是为了哪些有量大不安全的传统 URL 需要被重写时候准备的。

• 详情参考MDN

3.滚动到指定位置

在vue项目中可以使用下面的方法
this.$refs[name].scrollIntoView()

4. ifram播放视频有黑边问题

需要将ifram的高度设置为宽度的52.5%，视频才不会有黑边

5.图片链接加一个随机数可以解决都缓存问题

6.小程序图片高度不能自适应问题

在image标签添加 mode="widthFix"

<image class="explain__imgText" src="图片地址" alt="" mode="widthFix" />

7. 阻止ios活动回弹

13ad8463af71294d00e4a0c07de1fb2.png 51d9f86f035ea095314b19368cce7a6.png

9. nuxt代理请求https问题

• 1. 'UNABLE_TO_VERIFY_LEAF_SIGNATURE '
     出现这个报错说明https证书配置有问题，找后端处理

10. cookie问题

cookie同一个字段，但path不相同在控制台看到的会是两个字段。如下

    document.cookie = "name=张三; path=/;"
    document.cookie = "name=张三"

微信图片_20220712151721.png
这种情况下，如果要删除cookie，需要把对应的path也一起设置。

11.媒体查询

max 与min的区别

  /* min-height  表示高度大于等于500px时，显示红色 */
    @media screen and (min-height: 500px) {
      .child {
        background-color: red;
      }
    }
      /* max-height  表示 高度 >= 0px &&  高度 <= 499px时，显示绿色 */
    @media screen and (max-height: 499px) {
      .child {
        background-color: green;
      }
    }

12. postMessage的一些理解

1. A页面调用B页面的postMessage方法，给B页面发送消息。反过来，B页面给A页面，则需要在B页面调用A页面的postMessage方法

13. 关于Date对象在 IOS上获取时间戳的兼容性问题

// 这种方式在IOS上无法获取时间戳 返回一个NaN
+new Date('2022.8.29 18:00') // NaN