是否有与之相对的HTML?

时间:2020-03-05 18:43:54  来源:igfitidea点击:

HTML中是否有一个标记,仅在启用JavaScript的情况下才会显示其内容?我知道<noscript>的工作方式相反,当JavaScript关闭时会显示其HTML内容。但是,我只想在JavaScript可用的情况下在网站上显示表单,告诉他们为什么没有表单就不能使用表单。

我知道如何执行此操作的唯一方法是使用script标签中的document.write();方法,对于大量HTML来说似乎有些混乱。

解决方案

回答

我们可能有一个不可见的div,该div会在页面加载时通过JavaScript显示。

回答

我们还可以使用Javascript从另一个源文件加载内容并将其输出。那可能比我们要找的要多一些黑匣子。

回答

亚历克斯(Alex)的文章在这里浮现在脑海,但是仅当我们使用ASP.NET时,它才可以在JavaScript中进行仿真。

回答

我们可以将段落| div的可见性设置为"隐藏"。

然后,在"加载"功能中,我们可以将可见性设置为"可见"。

就像是:

<body onload =" javascript:document.getElementById(rec).style.visibility = visible">
<p style =" visibility:visible" id =" rec">除非有JavaScript,否则此文本将被隐藏。</ p>

回答

没有标签。我们将需要使用javascript来显示文本。

有人已经建议使用JS动态设置CSS可见。我们还可以使用document.getElementById(id).innerHTML =" My Content"`动态生成文本,或者动态创建节点,但是CSS hack可能是最容易阅读的。

回答

这是隐藏的div方式的示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>

(我们可能需要针对较差的IE进行调整,但我们会明白的。)

回答

我想到的最简单的方法:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

没有document.write,没有脚本,纯CSS。

回答

首先,始终将内容,标记和行为分开!

现在,如果我们正在使用jQuery库(我们确实应该这样做,它会使JavaScript变得容易得多),则应执行以下代码:

$(document).ready(function() {
    $("body").addClass("js");
});

启用JS后,这将为我们在正文上提供一个添加类。
现在,在CSS中,可以在JS类不可用时隐藏该区域,并在JS可用时显示该区域。

另外,我们可以将no-js作为默认类添加到body标签,并使用以下代码:

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

请记住,如果禁用CSS,它仍然会显示。

回答

我真的不同意所有关于预先嵌入HTML并用CSS隐藏它直到再次将其显示为JS的答案。即使未启用JavaScript,该节点仍存在于DOM中。的确,大多数浏览器(甚至是可访问性浏览器)都将忽略它,但是它仍然存在,并且有时很可能再次被我们咬住。

我的首选方法是使用jQuery生成内容。如果内容很多,则可以将其另存为HTML片段(只是要显示的HTML,而没有html,body,head等标签),然后使用jQuery的ajax函数将其加载到整页。

test.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
       $.get('_test.html', function(html) {
         $('p:first').after(html);
       });
     });
    </script>
</head>
<body>
  <p>This is content at the top of the page.</p>
  <p>This is content at the bottom of the page.</p>
</body>
</html>

_test.html

<p>This is from an HTML fragment document</p>

结果

<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>