前端隐藏加载执行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.最后

您的项目需求