พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน noscript Tag

<noscript> tag ใน HTML5 ถูกใช้เพื่อแสดงเนื้อหาให้กับผู้ใช้ในกรณีที่เว็บเบราว์เซอร์ของผู้ใช้งานไม่รองรับ JavaScript หรือปิดใช้งาน JavaScript ซึ่งหมายความว่าเนื้อหาภายใน <noscript> จะปรากฏขึ้นเมื่อ JavaScript ไม่ทำงาน โดยจะไม่แสดงเนื้อหาภายในเมื่อ JavaScript ถูกเปิดใช้งานตามปกติ

การใช้งานหลักของ <noscript> คือการแสดงข้อความหรือเนื้อหาสำรองเพื่อให้ผู้ใช้รับรู้ว่าบางฟังก์ชันหรือส่วนของเว็บไซต์ไม่สามารถใช้งานได้เนื่องจากการปิดใช้งาน JavaScript

ตัวอย่างการใช้งาน <noscript>

แสดงข้อความแจ้งเตือนเมื่อปิดใช้งาน JavaScript

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Noscript Example</title>
</head>
<body>
    <h1>ยินดีต้อนรับสู่เว็บไซต์</h1>
    
    <!-- แสดงเฉพาะเมื่อปิดใช้งาน JavaScript -->
    <noscript>
        <p style="color: red;">เว็บไซต์นี้ต้องการเปิดใช้งาน JavaScript เพื่อการทำงานที่สมบูรณ์ กรุณาเปิดใช้งาน JavaScript ในเบราว์เซอร์ของคุณ</p>
    </noscript>
    
    <p>ขอบคุณที่เยี่ยมชมเว็บไซต์ของเรา!</p>
</body>
</html>

ในตัวอย่างนี้ หากผู้ใช้งานปิด JavaScript ข้อความใน <noscript> จะปรากฏเป็นการแจ้งเตือนให้เปิดใช้งาน JavaScript

แสดงเนื้อหาสำรองในกรณีที่ต้องการโหลดสคริปต์ภายนอก

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Script Example</title>
</head>
<body>
    <h1>โหลดแผนที่ด้วย JavaScript</h1>
    
    <!-- โหลดแผนที่ผ่าน JavaScript -->
    <script src="https://example.com/map-script.js"></script>

    <!-- แสดงเฉพาะเมื่อปิดการใช้งาน JavaScript -->
    <noscript>
        <p>เราไม่สามารถโหลดแผนที่ได้เนื่องจาก JavaScript ถูกปิด กรุณาเปิด JavaScript เพื่อดูแผนที่</p>
    </noscript>
</body>
</html>

ในตัวอย่างนี้ เนื้อหาภายใน <noscript> จะถูกแสดงในกรณีที่ JavaScript ไม่ถูกเปิดใช้งาน และสคริปต์ที่ใช้โหลดแผนที่จะไม่สามารถทำงานได้

ใช้ร่วมกับ <img> เพื่อแสดงเนื้อหาทดแทนในกรณีที่ JavaScript ไม่ทำงาน

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Noscript with Image</title>
</head>
<body>
    <h1>รูปภาพของสินค้า</h1>
    
    <!-- โหลดรูปภาพด้วย JavaScript -->
    <script>
        document.write('<img src="product-image.jpg" alt="รูปภาพของสินค้า">');
    </script>

    <!-- แสดงรูปภาพสำรองเมื่อ JavaScript ไม่ทำงาน -->
    <noscript>
        <img src="product-image-fallback.jpg" alt="รูปภาพสำรองของสินค้า">
    </noscript>
</body>
</html>

ในตัวอย่างนี้ JavaScript จะถูกใช้เพื่อแสดงรูปภาพของสินค้า แต่หาก JavaScript ถูกปิด <noscript> จะทำการแสดงรูปภาพสำรองแทน

สรุป

<noscript> เป็นเครื่องมือที่มีประโยชน์ในการแสดงเนื้อหาสำรองหรือแจ้งเตือนผู้ใช้เมื่อ JavaScript ถูกปิดหรือไม่สามารถทำงานได้ เราสามารถใช้ <noscript> ในหลายกรณี เช่น การแสดงข้อความเตือน, การแสดงเนื้อหาทดแทน, หรือการให้ทางเลือกอื่นสำหรับเนื้อหาที่พึ่งพา JavaScript

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ