总结iframe存在的问题

onresize · Apr 22, 2024 · 3a99ef5 · 3a99ef5
1 parent c0cfa51
commit 3a99ef5
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 2 deletions.
diff --git a/docs/.vuepress/components/FetchGithubCommit.vue b/docs/.vuepress/components/FetchGithubCommit.vue
@@ -79,14 +79,17 @@ onUnmounted(() => {
 }
 
 .flex-box {
+  max-width: var(--content-width);
   width: 100%;
   height: 690px;
+  box-sizing: border-box;
   .box {
+    width: 100%;
     & + div {
       margin-top: 10px;
     }
     .item-row {
-      min-width: 400px;
+      min-width: 366px;
       height: 60px;
       padding: 10px;
       box-sizing: border-box;

diff --git a/docs/.vuepress/public/AA_mdPics/cache.min.png b/docs/.vuepress/public/AA_mdPics/cache.min.png
diff --git a/docs/技术总结/踩坑总结/HTTP.md b/docs/技术总结/踩坑总结/HTTP.md
@@ -52,6 +52,14 @@ description: HTTP
   | 数据重传     | 有                 | 有            |
   | 拥塞控制     | 有                 | 有            |
 
+### `TCP 和 UDP 的区别`
+- TCP是可靠的通信协议、安全性高、但是效率低、速度慢、UDP是公认可靠通信协议、速度快、但是丢包率高、安全性不高、TCP连接前、需要三次握手、而UDP不需要建立连接
+- 他们分别应用场景：TCP用于传输 `安全性要求高` 比如 POST GET 请求、UDP用于比如： `直播`、`聊天`、`文件传输`
+
+### `url的长度限制`
+- 在一些场景下、如链接分享、url用params方式携带参数跳转
+- url是有长度限制的、不同浏览器对url长度限制不同、如：chorme对url长度限制8182个字符
+
 ### `浏览器输入域名发生了什么`  
   > 当浏览器输入域之后可分为两个阶段：`网络通信` 和 `页面渲染`
   - #### `1.网络通信阶段`

diff --git a/docs/技术总结/踩坑总结/TS入门到进阶.md b/docs/技术总结/踩坑总结/TS入门到进阶.md
@@ -33,6 +33,27 @@ arr.push('3')
 arr.push(false) // 报错、类型必须是 number | string
 ```
 
+- #### `枚举 (enum)`
+- 在TS中、可以用枚举定义类似boolean类型这样有限范围的值、enum可以定义多个有限的值
+```ts
+enum randomName {
+  name1,
+  name2,
+  name3: "王五",
+}
+
+function toChinese(val: randomName) {
+   switch (val) {
+    case randomName.name1:
+      return '张三';
+    case randomName.name2:
+      return '李四';
+  }
+}
+
+toChinese(randomName.name2)
+```
+
 - #### `联合类型`
 
 ```ts

diff --git a/docs/技术总结/踩坑总结/iframe有什么问题.md b/docs/技术总结/踩坑总结/iframe有什么问题.md
@@ -14,4 +14,18 @@ description: iframe有什么问题
 
 - 增加使用体验、使用[iframe-resizer](https://github.com/davidjbradshaw/iframe-resizer)让第三方页面嵌入后、随着第三方页面自适应大小、同时还可以与其通信
 
-- 存在的问题：`前置缓存相关`, `非dom节点相关`, `样式处理相关`
+- 存在的问题：`强制缓存`、`内部非dom节点相关`、`触碰事件`
+
+#### 1.强制缓存问题
+- 如下图：在本地创建了两个html文件、`1.html` 里面用iframe嵌套了 `2.html`、本地开启`http-server`服务、会发现被iframe包裹的页面重复请求是来自内存、证明iframe有强制换成问题、而直接访问的 `1.html` 是304协商缓存
+
+<p align="center">
+  <img src="/AA_mdPics/cache.min.png" />
+</p>
+
+#### 2.内部非dom节点相关
+- iframe的 `2.html` 页面、在 `1.html` 里无法用dom去操作iframe内部的 `2.html` 页面的节点、例如在 `2.html` 中添加一个input框、之后在 `1.html` 页面中去尝试获取这个`input` 框节点、会发现操作不了
+- 这里比如 `Vue` 中的 `keepALive` 组件的实现、就是通过将真实dom缓存在内存中来实现的、这里iframe是无法被 `KeepAlive` 缓存的
+
+#### 3.触碰事件
+- 比如说 `web` 端给 `iframe` 添加点击事件、只有 `iframe` 的边框才能点击、它内部的是的区域不能点击