如何阻止HTML在JSP页面中使用Javascript进行渲染

How can I stop HTML from rendering using Javascript in a JSP page?

本文关键字：Javascript HTML 何阻止 JSP      更新时间：2023-09-26

我们的想法是，如果用户从中国访问我们的网站，我们必须阻止某些资产以提高我们的网站速度。（例如，Facebook资源。我甚至需要阻止它们加载，因为它们总是被阻止）

需要注意的是，我必须在JavaScript中执行此操作（更新：请参阅底部的编辑），因为由于我们使用Akamai进行缓存，因此必须在客户端执行此操作。

考虑一下这个HTML和一些JSTL:

<div class="num1">
  //some stuff like text and images
    <div class="num2">
        //a nested div with other stuff
      <c:if test="${varIsAlwaysTrue eq false}">
        <div class="num3">
        </div>
      </c:if>
    </div>
</div>

我该如何使用一个JavaScript变量来放置类似IF语句的内容？（变量名为XY.isChina）

我真正能想到的是什么是scriptlet方法：（显然不是<%标记和Java代码）

<script>
if (XY.isChina === false) {
</script>
<div class="num1">
  //some stuff like text and images
    <div class="num2">
        //a nested div with other stuff
      <c:if test="${varIsAlwaysTrue eq false}">
        <div class="num3">
        </div>
      </c:if>
    </div>
</div>

<script>
}
</script>

我几乎肯定这不会奏效。

这里游戏的目的是IF语句中没有加载任何内容。在页面上打洞是可以接受的，但如果响应元素可以将其视为不存在（出于对齐目的），那就更好了。

有什么想法吗？

提前谢谢。

EDIT:我应该说我需要在客户端执行，而不是特别指定JavaScript。该变量已经在JavaScript中设置，但如果有其他客户端方法可以实现这一点，那也没关系但是，我不能使用像jQuery这样的库

换个角度看。如果XY.isChina == true，为什么不隐藏这些部分，而不是在这个条件成立的情况下不加载它们呢？因为JSP甚至在执行Javascript之前就已经呈现了HTML。

<script>
if (XY.isChina === false) {
   document.getElementById( "numxyz" ).style.display = 'none';
}
</script>

我需要阻止他们甚至试图加载

听起来像是想把圆圈弄平，因为

由于我们的缓存，它必须在客户端完成

因此，作为第一个（部分）结论，您必须接受要加载的相关部件。

剩下的问题是避免正确显示隐藏的内容（需要时间，对用户体验不利）。

因此，解决方案可以是最初隐藏这些部分，然后仅在必须显示的情况下显示它们。在您给定的示例中，如下所示：

HTML:

<div class="num1 block-for-china"> <!-- note the dedicated class here -->
  //some stuff like text and images
    <div class="num2">
        //a nested div with other stuff
      <c:if test="${varIsAlwaysTrue eq false}">
        <div class="num3">
        </div>
      </c:if>
    </div>
</div>

CSS：

.block-for-china {
  display: none;
}

JS:

document.onload(function() {
  if (!XY.isChina) { // <-- up to you how to test this condition...
    var blockForChina = document.getElementsByClassName('block-for-china');
    for (var index in blockForChina) {
       blockForChina[index].style.display = 'inherit';
    }
  }
});
相关文章：