มี HTML ตรงข้ามกับ <noscript> หรือไม่

Question 1

มีแท็กใน HTML ที่จะแสดงเนื้อหาเมื่อเปิดใช้งาน JavaScript หรือไม่? ฉันรู้ว่า<noscript>ทำงานในทางตรงกันข้ามโดยแสดงเนื้อหา HTML เมื่อปิด JavaScript แต่ฉันต้องการแสดงแบบฟอร์มบนไซต์หากมี JavaScript เท่านั้นโดยบอกว่าเหตุใดจึงไม่สามารถใช้แบบฟอร์มได้หากไม่มี

วิธีเดียวที่ฉันรู้วิธีทำคือใช้document.write();เมธอดในแท็กสคริปต์และดูเหมือนจะยุ่งเล็กน้อยสำหรับ HTML จำนวนมาก

Question 2

คุณสามารถมี div ที่มองไม่เห็นซึ่งแสดงผ่าน JavaScript เมื่อโหลดหน้าเว็บ

Question 3

วิธีที่ง่ายที่สุดที่ฉันคิดได้:

<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 บริสุทธิ์

Question 4

ฉันไม่เห็นด้วยกับคำตอบทั้งหมดที่นี่เกี่ยวกับการฝัง HTML ไว้ล่วงหน้าและซ่อนด้วย CSS จนกว่าจะแสดงด้วย JS อีกครั้ง แม้จะไม่เปิดใช้งาน JavaScript โหนดนั้นก็ยังคงอยู่ใน DOM จริงอยู่ที่เบราว์เซอร์ส่วนใหญ่ (แม้แต่เบราว์เซอร์การช่วยการเข้าถึง) จะเพิกเฉย แต่ยังคงมีอยู่และอาจมีช่วงเวลาแปลก ๆ ที่จะกลับมากัดคุณ

วิธีที่ฉันต้องการคือใช้ jQuery เพื่อสร้างเนื้อหา หากเนื้อหาเป็นจำนวนมากคุณสามารถบันทึกเป็นส่วน HTML (เฉพาะ HTML ที่คุณต้องการแสดงและไม่มีแท็ก html, body, head ฯลฯ ) จากนั้นใช้ฟังก์ชัน ajax ของ jQuery เพื่อโหลดลงใน เต็มหน้า

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>

Question 5

ก่อนอื่นแยกเนื้อหามาร์กอัปและพฤติกรรมออกจากกันเสมอ!

ตอนนี้ถ้าคุณใช้ไลบรารี jQuery (คุณควรจะทำให้ JavaScript ง่ายขึ้นมาก) โค้ดต่อไปนี้ควรทำ:

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

สิ่งนี้จะทำให้คุณมีคลาสเพิ่มเติมในเนื้อหาเมื่อเปิดใช้งาน JS ตอนนี้ใน CSS คุณสามารถซ่อนพื้นที่เมื่อคลาส JS ไม่พร้อมใช้งานและแสดงพื้นที่เมื่อ JS พร้อมใช้งาน

หรือคุณสามารถเพิ่มno-jsเป็นคลาสเริ่มต้นในแท็กร่างกายของคุณและใช้รหัสนี้:

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

โปรดจำไว้ว่าจะยังคงแสดงอยู่หากปิดใช้งาน CSS

Question 6

ฉันมีวิธีแก้ปัญหาที่ง่ายและยืดหยุ่นซึ่งค่อนข้างคล้ายกับ Will's (แต่ด้วยประโยชน์เพิ่มเติมของการเป็น html ที่ถูกต้อง):

ให้องค์ประกอบของร่างกายเป็นคลาส "jsOff" ลบ (หรือแทนที่) สิ่งนี้ด้วย JavaScript มี CSS เพื่อซ่อนองค์ประกอบใด ๆ ที่มีคลาส "jsOnly" พร้อมกับองค์ประกอบหลักที่มีคลาส "jsOff"

ซึ่งหมายความว่าหากเปิดใช้งาน JavaScript คลาส "jsOff" จะถูกลบออกจากเนื้อหา ซึ่งหมายความว่าองค์ประกอบที่มีคลาส "jsOnly" จะไม่มีพาเรนต์ที่มีคลาส "jsOff" ดังนั้นจะไม่ตรงกับตัวเลือก CSS ที่ซ่อนไว้ดังนั้นองค์ประกอบเหล่านี้จะแสดง

หากปิดใช้งาน JavaScript คลาส "jsOff" จะไม่ถูกลบออกจากเนื้อหา องค์ประกอบที่มี "jsOnly" จะมีพาเรนต์ที่มี "jsOff" ดังนั้นจะตรงกับตัวเลือก CSS ที่ซ่อนองค์ประกอบเหล่านี้ดังนั้นองค์ประกอบเหล่านี้จะถูกซ่อน

นี่คือรหัส:

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

เป็น html ที่ถูกต้อง มันเป็นเรื่องง่าย มีความยืดหยุ่น

เพียงเพิ่มคลาส "jsOnly" ให้กับองค์ประกอบใด ๆ ที่คุณต้องการให้แสดงเมื่อเปิดใช้งาน JS เท่านั้น

โปรดทราบว่า JavaScript ที่ลบคลาส "jsOff" ควรดำเนินการโดยเร็วที่สุดภายในแท็กเนื้อหา ไม่สามารถดำเนินการได้ก่อนหน้านี้เนื่องจากแท็กเนื้อหาจะยังไม่มี ไม่ควรดำเนินการในภายหลังเนื่องจากจะหมายความว่าองค์ประกอบที่มีคลาส "jsOnly" อาจไม่สามารถมองเห็นได้ในทันที (เนื่องจากจะจับคู่ตัวเลือก CSS ที่ซ่อนไว้จนกว่าคลาส "jsOff" จะถูกลบออกจากองค์ประกอบเนื้อหา)

นอกจากนี้ยังสามารถเป็นกลไกสำหรับการจัดแต่งทรงผมเฉพาะ js (เช่น .jsOn .someClass{} ) และการไม่ใช้ js เท่านั้น (เช่น.jsOff .someOtherClass{}) คุณสามารถใช้เพื่อเป็นทางเลือกให้กับ<noscript>:

.jsOn .noJsOnly{
    display:none;
}

Question 7

คุณยังสามารถใช้ Javascript เพื่อโหลดเนื้อหาจากไฟล์ต้นฉบับอื่นและส่งออกไฟล์นั้น นั่นอาจจะเป็นกล่องดำมากกว่าที่คุณกำลังมองหา

Question 8

นี่คือตัวอย่างสำหรับวิธี 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 ที่ไม่ดี แต่คุณเข้าใจแล้ว)

Question 9

ทางออกของฉัน

.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

บทความของ Alex มีอยู่ในใจที่นี่ แต่จะใช้ได้เฉพาะในกรณีที่คุณใช้ ASP.NET ซึ่งสามารถจำลองใน JavaScript ได้ แต่คุณต้องใช้ document.write () อีกครั้ง

Question 11

คุณสามารถตั้งค่าการมองเห็นของย่อหน้า | div เป็น 'hidden'

จากนั้นในฟังก์ชัน 'onload' คุณสามารถตั้งค่าการมองเห็นเป็น 'มองเห็นได้'

สิ่งที่ต้องการ:

<body onload = "javascript: document.getElementById (rec) .style.visibility = visible"> <p style = "visibility: visible" id = "rec"> ข้อความนี้จะถูกซ่อนเว้นแต่จะมีจาวาสคริปต์ </p>

Question 12

ไม่มีแท็กสำหรับสิ่งนั้น คุณจะต้องใช้จาวาสคริปต์เพื่อแสดงข้อความ

บางคนแนะนำให้ใช้ JS เพื่อตั้งค่า CSS ที่มองเห็นได้แบบไดนามิก คุณยังสามารถสร้างข้อความdocument.getElementById(id).innerHTML = "My Content"แบบไดนามิกโดยใช้หรือสร้างโหนดแบบไดนามิกได้ แต่การแฮ็ก CSS น่าจะอ่านได้ง่ายที่สุด

Question 13

ในทศวรรษที่มีการถามคำถามนี้HIDDENแอตทริบิวต์ได้ถูกเพิ่มเข้าไปใน HTML ช่วยให้สามารถซ่อนองค์ประกอบได้โดยตรงโดยไม่ต้องใช้ CSS เช่นเดียวกับโซลูชันที่ใช้ CSS องค์ประกอบต้องไม่ถูกซ่อนโดยสคริปต์:

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