时间戳

首页 > 解决方案 > 不要使用JS加载在dom中显示为none的div

javascript - 不要使用JS加载在dom中显示为none的div

问题描述

我有 2 个 div，其中一个用于 Internet Explorer，另一个用于其余浏览器。用于 IE 的一个隐藏display:none用于其他浏览器，并使用 Internet Explorer 的媒体查询显示。目前一切正常。但这似乎不是理想的解决方案，因为display:nonediv 确实出现在 DOM 中，这对性能不利。如何仅初始化可见的元素，或者如何不使用具有display:none

<div style="display:none"id="explorer">Internet explorer</div>
<div id="rest">Chrome,Firefox,etc</div>

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #explorer{
        display: block !important;
    }
    #rest{
        display: none;
    }
}

因此，如果您在 Chrome 中加载它，<div style="display:none"id="explorer">Internet explorer</div>将不会显示在视图中，但您将能够通过开发工具看到它。我希望这根本不使用 JS 为 chrome、firefox 等进行初始化，也不<div id="rest">Chrome,Firefox,etc</div>为 IE 初始化。

标签： javascripthtml

解决方案

不幸的是，如果您以正常方式将其写入 HTML 文档，则在涉及 CSS 或 JS 之前会发生一些事情。因此，您不需要在文档中包含 div 并使用 JS 插入其中一个或另一个。

if (isInternetExplorer) {
    var ieContent = document.createElement(‘div’)
    ...
    document.body.appendChild(ieContent)
} else {
    var modernContent = document.createElement(‘div’)
    ...
    document.body.appendChild(modernContent)

}

如何将您的页面内容放入 JS 是令人讨厌的部分。让所有内容都保留在 .html 文件中的一种方法是：

<script type='text/html' id='ieContent'>
    <div>hello internet explorer</div>
</script>

ieContent.innerHTML = document.getElementById('ieContent').innerText

如果可能，最好让您的服务器检测 IE 并重定向到一个完全不同的 .html 文件；那么您有 2 个简单明了且分隔良好的文件，并且没有魔法。甚至在此之前，我会质疑您的隐形 div 的影响以及通过使事情变得比这更复杂来获得什么。

推荐阅读