前端隱藏加載執行JavaScript

覽器加載一個js腳本，會在devtools中留下各種痕跡，elements中的script元素，console中的日志，source中的代碼，network中的網絡請求等

elements

這個比較簡單，插入js的時候設置好id，在js中刪掉自身就好了

<script id="xxx">
    // todo
    document.getElementById("xxx").remove();
</script>

對于引用js

<script id="xxx" src="a.js"></script>

// a.js
document.getElementById("xxx").remove()

對于動態加載的js也是一樣的

<script>
    let e=document.createElement("script");
    e.id="xxx";
    e.src="a.js";
    document.head.appendChild(e);
</script>

// a.js
document.getElementById("xxx").remove()

或者也可以這樣

<script>
    let e=document.createElement("script");
    e.src="a.js";
    document.head.appendChild(e);
    e.remove();
</script>

雖然看起來很奇怪，但a.js確實能執行，似乎是加載a.js時阻塞了腳本執行，執行完a.js之后再remove

console

clear就好了

console.clear()

source

直接引用和動態加載都會在source中出現

<script src="a.js"></script>

<script>
    let e=document.createElement("script");
    e.src="a.js";
    document.head.appendChild(e);
</script>

這樣都是不行的，經過測試發現動態插入js代碼時不會被記錄在source中

<script>
    fetch("a.js").then(resp => {
        return resp.text()
    }).then(text => {
        let e = document.createElement("script");
        e.innerHTML = text;
        document.head.appendChild(e);
    })
</script>

這樣a.js就不會出現在source里了

network

常規HTTP/WebSocket都會被記錄，無法繞過，但是WebRTC不會，WebRTC可以基于UDP/TCP傳輸，WebRTC提供createDataChannel API，可以用于傳輸文本，那么就可以實現network隱藏加載

考慮WebRTC需要傳遞offer和icecandidate，還是得通過HTTP/WebSocket傳輸，而且復雜網絡環境下還需要使用或部署STUN/TURN服務器，穩定性有待考慮

WebRTC技術可以參考學習我最近看的幾篇文章透明日報20200801期

其他的方法我還沒有找到，技術不行就社會工程

一個思路是可以偽裝成其他流量混過去，比如png

<script>
    fetch("a.png").then(resp => {
        return resp.text()
    }).then(text => {
        let e = document.createElement("script");
        e.innerHTML = text;
        document.head.appendChild(e);
    })
</script>

然后在delvtools里也看不出來

另外一個思路是devtools目前只在打開的時候記錄network數據，那么只要在devtools關閉的時候加載資源，打開就不加載，這樣就不會出現在network里了

新的問題又出現了，如何檢測devtools的狀態，網上已經有不少公開技巧了

https://github.com/sindresorhus/devtools-detect

https://github.com/AEPKILL/devtools-detector

最后

還可以在哪里找到加載和執行痕跡呢

還有什么方法可以隱藏這些痕跡呢

如果你現在也想學習前端開發技術，在學習前端的過程當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我的Q群:前114中6649后671還有大牛整理的一套高效率學習路線和教程與您免費分享，還有許多大廠面試真題。希望能夠對你們有所幫助。

日常開發中，我們通用會選擇使用 javascript 切換類來控制它們的狀態樣式，比如 .open、.closed,.show、.hide。

在本篇文章中，我們將探索以下幾個方面內容：

在元素沒有子元素的情況下，使用 :empty 偽類來隱藏元素
將 :empty 與 :has() 和 :not() 結合使用，可以處理更多情況
梳理隱藏元素的常見方法

1.隱藏一個空元素

:empty 偽類可以匹配任何沒有子元素的元素。當前已經得到所有主流瀏覽器的支持。如果該元素是一個空元素，我們可以結合 display 屬性使用來隱藏元素。

示例：

<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:empty {
    display: none;
  }
</style>


<div class="box">1</div>
<div class="box"></div>
<div class="box">3</div>
<div class="box">4</div>

效果如下：

2.和 :has() 和 :not() 結合使用

和 :has() 和 :not() 結合使用時，我們可以在更多復雜場景中使用，比如查找子元素有空元素的元素、隱藏一個不包含某個子元素的父元素等。

2.1.查找子元素為空的父元素

下面的例子是每個 .box 盒子都有一個 span 元素，其中 3 個 span 元素是有文本節點的，一個沒有。通過和 :has() 結合使用，我們可以先找到子元素為空的原生 span:empty, 然后通過 .box:has(span:empty) 判斷 .box 下是否有子元素 span 為空的父元素，并隱藏它。

<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:not(span:has(:empty)) {
    display: none;
  }
</style>
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span></span></div>
<div class="box"><span>4</span></div>

效果如下：

2.2.查找不包含某個子元素的父元素

下面的示例是首先查找 .box 元素下有 .text 子元素的父元素，然后使用 .box:not() 進行取反操作，結合 display 屬性對元素執行隱藏。

<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:not(.box:has(.text)) {
    display: none;
  }
</style>
<div class="box"><span class="text">1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span class="text">4</span></div>

效果如下：

3.隱藏元素的常見方法

方法一：display: none

此方法使用的最多，該方法會使 DOM 隱藏，觸發 Reflow 和 Repaint。

方法二：visiblity: hidden

此方法 DOM 結構無變化，隱藏后仍占據空間，僅會觸發 Repaint。結構保留，占據空間，僅觸發重繪，不會觸發事件（無法選中）。

方法三：opacity: 0

此方法 DOM 結構無變化，隱藏后仍占據空間。

方法四：content-visibility: hidden

它能讓用戶代理跳過元素的呈現工作（包括布局和繪制），直到需要時才進行，這使得初始頁面加載速度大大加快。

方法五：position + left + top

它能讓元素脫離文檔流，不占用空間，并且通過設置 left 或者 top 屬性負值，可以將元素定位到屏幕之外。

方法六：transform: translate(-999px)

它能讓元素偏移出視圖窗口，空間會占據，但元素實際不在視窗內所以無法交互。

方法七：font-size: 0

通過設置字體大小為0，將行內元素內容隱藏，但是實際空間還在。

方法八：width:0;height:0;overflow:hidden

通過設置元素寬高為0和設置 overflow: hidden 來實現元素隱藏，不占空間。

方法九：hidden property

通過設置 html 標簽的 hidden 來實現元素隱藏。

方法十：clip-path

clip-path屬性會創建一個裁剪區域，用于確定元素的哪些部分可見。使用clip-path: circle(0)可以達到將元素隱藏的效果。

方法十一：filter: blur(0)

將一個元素的模糊度設置為0, 從而使這個元素“消失”在頁面中。

4.最后

隨著瀏覽器對 :empty 、:has() 、:not() 等偽類和方法的支持越來越好，之前使用 js 來實現的功能，完全可以使用 CSS 來替換，替換后有著更好的性能和用戶體驗。本文最后梳理了隱藏元素的常見方法，如果你有其他方法，歡迎在文章下方留言，歡迎一起討論和交流。

ello大家好我是咕嚕鐵蛋！在微信小程序開發中，控制元素的顯示和隱藏是非常常見的需求。通過控制元素的顯示和隱藏，我們可以根據用戶的操作或特定的條件來動態地展示或隱藏某些內容，從而提升用戶體驗。在本文中，我將分享如何在微信小程序中實現元素的顯示和隱藏的方法。

1. 使用wx:if和hidden屬性

在微信小程序中，我們可以使用wx:if和hidden屬性來控制元素的顯示和隱藏。這兩個屬性有一些區別，具體如下：

- wx:if屬性：當條件為真時，該元素才會被渲染和顯示出來；當條件為假時，該元素會被移除并銷毀。這意味著當條件不滿足時，元素將完全不存在于頁面中，節省了頁面的渲染資源。

```html

</view>

```

- hidden屬性：當條件為真時，該元素會被隱藏，但仍然占據頁面布局空間；當條件為假時，該元素會正常顯示。這意味著無論條件是否滿足，元素都存在于頁面中，只是通過樣式設置將其隱藏。

```html

</view>

```

2. 使用動態數據綁定

除了使用wx:if和hidden屬性外，我們還可以通過動態數據綁定來控制元素的顯示和隱藏。在微信小程序中，我們可以使用data屬性來定義一個變量，然后通過修改該變量的值來控制元素的顯示和隱藏。

```javascript

Page({

data: {

showElement: true

toggleElement: function() {

this.setData({

showElement: !this.data.showElement

})

}

})

```

```html

</view>

```

在上述代碼中，我們使用了一個showElement的變量來控制元素的顯示和隱藏。通過點擊按鈕，調用toggleElement函數來改變showElement的值，從而切換元素的顯示狀態。

3. 使用條件判斷語句

除了使用wx:if、hidden屬性和動態數據綁定外，我們還可以使用條件判斷語句來控制元素的顯示和隱藏。在wxml模板中，可以使用wx:if語句和{{}}表達式來進行條件判斷，根據不同的條件來渲染和顯示不同的元素。

```html

<view>元素A的內容</view>

</template>

<view>元素B的內容</view>

</template>

```

在上述代碼中，我們通過條件判斷語句，根據condition的值來決定渲染和顯示elementA或elementB模板中的內容。這樣，我們可以根據不同的條件來動態地展示不同的元素。

總結起來，微信小程序中控制元素的顯示和隱藏有多種方法，包括使用wx:if和hidden屬性、動態數據綁定和條件判斷語句等。每種方法都有其適用的場景和特點，需要根據具體的開發需求來選擇合適的方法。我們應該不斷學習和探索，及時解決遇到的問題，并與讀者分享經驗和解決方案。希望這篇文章對你有所幫助！

在線咨詢

上一篇：HTML+CSS制作導航條
下一篇：PS之制作網頁翻轉按鈕

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端隱藏加載執行JavaScript

elements

console

source

network

最后

1.隱藏一個空元素

2.和 :has() 和 :not() 結合使用

2.1.查找子元素為空的父元素

2.2.查找不包含某個子元素的父元素

3.隱藏元素的常見方法

4.最后

您的項目需求