前端隱藏加載執(zhí)行JavaScript

覽器加載一個(gè)js腳本，會(huì)在devtools中留下各種痕跡，elements中的script元素，console中的日志，source中的代碼，network中的網(wǎng)絡(luò)請(qǐng)求等

elements

這個(gè)比較簡(jiǎn)單，插入js的時(shí)候設(shè)置好id，在js中刪掉自身就好了

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

對(duì)于引用js

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

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

對(duì)于動(dòng)態(tài)加載的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確實(shí)能執(zhí)行，似乎是加載a.js時(shí)阻塞了腳本執(zhí)行，執(zhí)行完a.js之后再remove

console

clear就好了

console.clear()

source

直接引用和動(dòng)態(tài)加載都會(huì)在source中出現(xiàn)

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

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

這樣都是不行的，經(jīng)過測(cè)試發(fā)現(xiàn)動(dòng)態(tài)插入js代碼時(shí)不會(huì)被記錄在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就不會(huì)出現(xiàn)在source里了

network

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

考慮WebRTC需要傳遞offer和icecandidate，還是得通過HTTP/WebSocket傳輸，而且復(fù)雜網(wǎng)絡(luò)環(huán)境下還需要使用或部署STUN/TURN服務(wù)器，穩(wěn)定性有待考慮

WebRTC技術(shù)可以參考學(xué)習(xí)我最近看的幾篇文章透明日?qǐng)?bào)20200801期

其他的方法我還沒有找到，技術(shù)不行就社會(huì)工程

一個(gè)思路是可以偽裝成其他流量混過去，比如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里也看不出來

另外一個(gè)思路是devtools目前只在打開的時(shí)候記錄network數(shù)據(jù)，那么只要在devtools關(guān)閉的時(shí)候加載資源，打開就不加載，這樣就不會(huì)出現(xiàn)在network里了

新的問題又出現(xiàn)了，如何檢測(cè)devtools的狀態(tài)，網(wǎng)上已經(jīng)有不少公開技巧了

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

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

最后

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

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

如果你現(xiàn)在也想學(xué)習(xí)前端開發(fā)技術(shù)，在學(xué)習(xí)前端的過程當(dāng)中有遇見任何關(guān)于學(xué)習(xí)方法，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問題，你都可以申請(qǐng)加入我的Q群:前114中6649后671還有大牛整理的一套高效率學(xué)習(xí)路線和教程與您免費(fèi)分享，還有許多大廠面試真題。希望能夠?qū)δ銈冇兴鶐椭?/p>

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

在本篇文章中，我們將探索以下幾個(gè)方面內(nèi)容：

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

1.隱藏一個(gè)空元素

:empty 偽類可以匹配任何沒有子元素的元素。當(dāng)前已經(jīng)得到所有主流瀏覽器的支持。如果該元素是一個(gè)空元素，我們可以結(jié)合 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() 結(jié)合使用

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

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

下面的例子是每個(gè) .box 盒子都有一個(gè) span 元素，其中 3 個(gè) span 元素是有文本節(jié)點(diǎn)的，一個(gè)沒有。通過和 :has() 結(jié)合使用，我們可以先找到子元素為空的原生 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.查找不包含某個(gè)子元素的父元素

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

<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

此方法使用的最多，該方法會(huì)使 DOM 隱藏，觸發(fā) Reflow 和 Repaint。

方法二：visiblity: hidden

此方法 DOM 結(jié)構(gòu)無變化，隱藏后仍占據(jù)空間，僅會(huì)觸發(fā) Repaint。結(jié)構(gòu)保留，占據(jù)空間，僅觸發(fā)重繪，不會(huì)觸發(fā)事件（無法選中）。

方法三：opacity: 0

此方法 DOM 結(jié)構(gòu)無變化，隱藏后仍占據(jù)空間。

方法四：content-visibility: hidden

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

方法五：position + left + top

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

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

它能讓元素偏移出視圖窗口，空間會(huì)占據(jù)，但元素實(shí)際不在視窗內(nèi)所以無法交互。

方法七：font-size: 0

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

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

通過設(shè)置元素寬高為0和設(shè)置 overflow: hidden 來實(shí)現(xiàn)元素隱藏，不占空間。

方法九：hidden property

通過設(shè)置 html 標(biāo)簽的 hidden 來實(shí)現(xiàn)元素隱藏。

方法十：clip-path

clip-path屬性會(huì)創(chuàng)建一個(gè)裁剪區(qū)域，用于確定元素的哪些部分可見。使用clip-path: circle(0)可以達(dá)到將元素隱藏的效果。

方法十一：filter: blur(0)

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

4.最后

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

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

1. 使用wx:if和hidden屬性

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

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

```html

</view>

```

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

```html

</view>

```

2. 使用動(dòng)態(tài)數(shù)據(jù)綁定

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

```javascript

Page({

data: {

showElement: true

toggleElement: function() {

this.setData({

showElement: !this.data.showElement

})

}

})

```

```html

</view>

```

在上述代碼中，我們使用了一個(gè)showElement的變量來控制元素的顯示和隱藏。通過點(diǎn)擊按鈕，調(diào)用toggleElement函數(shù)來改變showElement的值，從而切換元素的顯示狀態(tài)。

3. 使用條件判斷語(yǔ)句

除了使用wx:if、hidden屬性和動(dòng)態(tài)數(shù)據(jù)綁定外，我們還可以使用條件判斷語(yǔ)句來控制元素的顯示和隱藏。在wxml模板中，可以使用wx:if語(yǔ)句和{{}}表達(dá)式來進(jìn)行條件判斷，根據(jù)不同的條件來渲染和顯示不同的元素。

```html

<view>元素A的內(nèi)容</view>

</template>

<view>元素B的內(nèi)容</view>

</template>

```

在上述代碼中，我們通過條件判斷語(yǔ)句，根據(jù)condition的值來決定渲染和顯示elementA或elementB模板中的內(nèi)容。這樣，我們可以根據(jù)不同的條件來動(dòng)態(tài)地展示不同的元素。

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

在線咨詢

上一篇：HTML+CSS制作導(dǎo)航條
下一篇：PS之制作網(wǎng)頁(yè)翻轉(zhuǎn)按鈕

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

前端隱藏加載執(zhí)行JavaScript

elements

console

source

network

最后

1.隱藏一個(gè)空元素

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

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

2.2.查找不包含某個(gè)子元素的父元素

3.隱藏元素的常見方法

4.最后

您的項(xiàng)目需求