<noscript> ile karşıt bir HTML var mı?

Question 1

HTML'de yalnızca JavaScript etkinleştirildiğinde içeriğini görüntüleyecek bir etiket var mı? Bunun <noscript>tam tersi şekilde çalıştığını, JavaScript kapalıyken HTML içeriğini görüntülediğini biliyorum . Ancak, bir sitede yalnızca JavaScript varsa bir formu görüntülemek istiyorum ve onlara formu yoksa neden kullanamayacaklarını anlatmak istiyorum.

Bunu nasıl yapacağımı bilmemin tek yolu document.write();, bir komut dosyası etiketindeki yöntemdir ve büyük miktarlarda HTML için biraz dağınık görünüyor.

Question 2

Sayfa yüklendiğinde JavaScript aracılığıyla gösterilen görünmez bir div'iniz olabilir.

Question 3

Aklıma gelen en kolay yol:

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

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

Document.write yok, komut dosyası yok, saf CSS.

Question 4

HTML'yi önceden gömmek ve JS ile tekrar gösterilinceye kadar CSS ile gizlemekle ilgili buradaki tüm cevaplara gerçekten katılmıyorum. JavaScript etkin olmasa bile, bu düğüm DOM'da hala var. Doğru, çoğu tarayıcı (hatta erişilebilirlik tarayıcıları) bunu görmezden gelir, ancak yine de vardır ve sizi ısırmak için geri geldiğinde tuhaf zamanlar olabilir.

Tercih ettiğim yöntem, içeriği oluşturmak için jQuery kullanmak olacaktır. Çok fazla içerik olacaksa, onu bir HTML parçası olarak kaydedebilirsiniz (sadece göstermek isteyeceğiniz HTML ve html, body, head, vb. Etiketlerinin hiçbiri), ardından onu yüklemek için jQuery'nin ajax işlevlerini kullanabilirsiniz tam sayfa.

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>

sonuç

<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>

Question 5

Her şeyden önce, içeriği, biçimlendirmeyi ve davranışı daima ayırın!

Şimdi, jQuery kitaplığını kullanıyorsanız (gerçekten yapmalısınız, JavaScript'i çok daha kolay hale getirir), aşağıdaki kodun yapması gerekir:

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

Bu, JS etkinleştirildiğinde size gövde üzerinde ek bir sınıf verecektir. Artık CSS'de, JS sınıfı mevcut olmadığında alanı gizleyebilir ve JS mevcut olduğunda alanı gösterebilirsiniz.

Alternatif no-jsolarak, body etiketinize varsayılan sınıf olarak ekleyebilir ve şu kodu kullanabilirsiniz:

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

CSS devre dışı bırakıldığında hala görüntülendiğini unutmayın.

Question 6

Will'inkine biraz benzeyen basit ve esnek bir çözümüm var (ancak geçerli html olma avantajıyla birlikte):

Gövde elemanına bir "jsOff" sınıfı verin. Bunu JavaScript ile kaldırın (veya değiştirin). "JsOnly" sınıfına sahip öğeleri, "jsOff" sınıfına sahip bir üst öğe ile gizlemek için CSS'ye sahip olun.

Bu, JavaScript etkinleştirilirse, "jsOff" sınıfının gövdeden kaldırılacağı anlamına gelir. Bu, "jsOnly" sınıfına sahip öğelerin "jsOff" sınıfına sahip bir ebeveyni olmayacağı ve dolayısıyla onları gizleyen CSS seçiciyle eşleşmeyeceği, dolayısıyla gösterilecekleri anlamına gelir.

JavaScript devre dışı bırakılmışsa, "jsOff" sınıfı olmayacak vücuttan çıkarılmalıdır. "JsOnly" ile Elemanları olacak "jsOff" ile bir üst var ve bu yüzden olacak gizler onları, böylece gizli olacağı CSS seçici maç.

İşte kod:

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff','jsOn');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

Geçerli html. Basit. Esnek.

Yalnızca JS etkinleştirildiğinde görüntülemek istediğiniz herhangi bir öğeye "jsOnly" sınıfını eklemeniz yeterlidir.

Lütfen "jsOff" sınıfını kaldıran JavaScript'in body etiketi içinde olabildiğince erken çalıştırılması gerektiğini unutmayın. Gövde etiketi henüz orada olmayacağından daha önce çalıştırılamaz. "JsOnly" sınıfına sahip öğelerin hemen görünmeyebileceği anlamına geleceği için daha sonra çalıştırılmamalıdır (çünkü "jsOff" sınıfı gövde öğesinden kaldırılıncaya kadar bunları gizleyen CSS seçiciyle eşleşeceklerdir).

Bu aynı zamanda yalnızca js stiline (örneğin .jsOn .someClass{}) ve yalnızca js içermeyen stillere (örneğin ) yönelik bir mekanizma sağlayabilir .jsOff .someOtherClass{}. Aşağıdakilere bir alternatif sağlamak için kullanabilirsiniz <noscript>:

.jsOn .noJsOnly{
    display:none;
}

Question 7

Başka bir kaynak dosyadan içerik yüklemek ve bunun çıktısını almak için Javascript de kullanabilirsiniz. Bu, aradığınızdan biraz daha fazla kara kutu olabilir.

Question 8

Gizli div yöntemi için bir örnek:

<!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>

(Muhtemelen zayıf IE için ince ayar yapmanız gerekir, ancak fikri anladınız.)

Question 9

Çözümüm

.css:

.js {
display: none;
}

.js:

$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});

.html:

<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>

Question 10

Burada Alex'in makalesi akla geliyor, ancak yalnızca ASP.NET kullanıyorsanız uygulanabilir - JavaScript'te öykünebilir ancak yine document.write () kullanmanız gerekir;

Question 11

Bir | div paragrafının görünürlüğünü 'gizli' olarak ayarlayabilirsiniz.

Ardından 'onload' işlevinde görünürlüğü 'görünür' olarak ayarlayabilirsiniz.

Gibi bir şey:

<body onload = "javascript: document.getElementById (rec) .style.visibility = visible"> <p style = "visibility: visible" id = "rec"> Bu metin, javascript olmadığı sürece gizlenecektir. </p>

Question 12

Bunun için bir etiket yok. Metni göstermek için javascript kullanmanız gerekir.

Bazı kişiler CSS'yi dinamik olarak görünür kılmak için JS kullanmayı zaten önerdi. Ayrıca, metni document.getElementById(id).innerHTML = "My Content"dinamik olarak düğümlerle veya dinamik olarak oluşturarak da oluşturabilirsiniz, ancak CSS hacklemesi muhtemelen okunması en kolay olanıdır.

Question 13

Bu sorunun sorulmasından bu yana geçen on yıl içinde, HIDDENözellik HTML'ye eklendi. CSS kullanmadan öğeleri doğrudan gizlemeye izin verir. CSS tabanlı çözümlerde olduğu gibi, öğenin komut dosyası tarafından gizlenmesi gerekir:

<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>