使用css关闭javascript？答案

【问题标题】：turn off javascript using css?使用css关闭javascript？
【发布时间】：2013-04-27 03:05:22
【问题描述】：

我使用媒体查询将移动访问者引导至单独的移动特定样式表。问题是索引页面上有使用 JS 的元素，我需要为移动版本关闭它 - 我该怎么做？

补充说明：我不熟悉 JS - 我可以使用 html 和 css 并使用其他人的 js :-/

关于下面的一些 cmets，由于加载了不必要的代码，我担心移动设备的加载时间。有人可以告诉我要添加到我的元素中以告诉文档仅在不是移动设备时才加载 js 吗？问这个问题合适吗？

【问题讨论】：

关于检测移动用户的问题太多了。
我不认为它可以用 CSS 来完成......你试过用 JS 来做吗？
为什么不使用与重定向到移动样式表相同的逻辑来设置一个标志，您可以检查您的 JS 代码以确定它是否应该运行？

标签： javascript mobile css media-queries

【解决方案1】：

最好的解决方案是只加载移动版本所需的脚本。由于许多设备都有数据上限，因此您不希望用户加载他们不需要的脚本。因此，您可以通过 PHP 或 JavaScript 检测他们的浏览器，然后为他们的平台加载所需的文件。

【讨论】：

谢谢，是的，正如我在对原始问题的新编辑中提到的那样，我也很担心。我没有掌握 js 随意添加代码（正在努力）。我担心通过加载不需要的脚本在移动设备上导致不必要的缓慢加载时间。如何防止移动设备加载脚本？通过为移动设备使用不同的样式表，我希望可以添加一些内容来说明“不要加载任何 js”
CSS 不是脚本语言。它没有办法说是否加载脚本。您可以做到这一点的唯一方法是检测他们是否使用 iOS 设备（以及其他任何智能手机），或者他们是否使用计算机。这只能使用 JavaScript 或 PHP 等语言来完成。
这是我在 javascript 中用于检测浏览器/设备的代码。不过，我不确定您需要添加哪些术语来检测 android 或 windows phone。 jsfiddle.net/udHVN

【解决方案2】：

为什么不使用一个脚本来检测与您的媒体查询相同的规范？这样您就可以有选择地激活脚本。

1140 CSS Grid 框架中存在一个这样的脚本，用于支持旧浏览器上的媒体查询。您可以查看一下，看看如何利用它。

Here's an article 解释了如何检查屏幕宽度和高度以模拟媒体查询屏幕检测。

顺便说一句。 CSS 用于样式，仅此而已。

【讨论】：

你的权利，我忘记了我的 css 基础知识——它只用于样式

【解决方案3】：

我假设您的意思是页面上有嵌入脚本的元素。您需要做的第一件事是摆脱嵌入的脚本，例如元素上的 onclick 属性。这些脚本需要移动到它们自己的外部 JS 文件中。完成此操作后，您只能包含网站移动版本的 JS 文件。

【讨论】：

【解决方案4】：

两种选择：

您可以在桌面上使用一个脚本来加载所有其他脚本，如果您只使用非侵入式 Javascript（例如 jquery），这是一个不错的选择。

另一种选择是不首先在服务器端生成这些脚本。

【讨论】：

【解决方案5】：

媒体查询可能是为移动用户提供替代样式的最佳解决方案。不幸的是，在页面逻辑的情况下，<script> 元素没有 media 属性以类似方式进行。

但是，您可以提供一个脚本加载器，它将加载所需的.js 文件，具体取决于浏览器根据您的媒体查询选择的样式表。我不知道如何以直接、优雅的方式做到这一点，但有一个很好的技巧。您必须使用唯一声明（虚拟、不重要或设计不同）“标记”每个 .css，并在页面加载后从 JS 中检查它以确定浏览器应用了哪个样式表。

CSS 可能如下所示：

@media handheld, screen and (max-width:1023px) {
    body {margin-top: 1px}
}
@media screen and (min-width:1024px) {
    body {margin-top: 0px}
}
/* These would be separate .css files in a real example */

以及随附的JS如下：

window.setTimeout('wait()', 10);
function wait() {
    if (!document.body)
        window.setTimeout('wait()', 100)
    else
       onLoad();
}

function onLoad() {
    var load = document.createElement('script');
    var head = document.getElementsByTagName('head')[0];
    var body = document.getElementsByTagName('body')[0];
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top');
    switch (mark) {
        case '0px':
            load.setAttribute('src', 'handheld.js');
            break;
        case '1px':
            load.setAttribute('src', 'screen.js');
            break;
        default:
            load.setAttribute('src', 'somethingelse.js');
    }
    head.appendChild(load);
}

【讨论】：