กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • มื่อลูกค้ากดลิ้ง ผ่าน line app

    July 4, 2026

    เมื่อลูกค้ากดลิ้ง ผ่าน line app
    ผมอยากให้มีการแจ้งเตือน popup ว่าให้ไปเปิดใน browser แทน (เพราะระบบไลน์บล๊อค ดาวน์โหลดpdfไม่ได้)
    พร้อมมีไอคอนมือชี้ไปที่มุมขวาล่าง กดที่จุด3จุด

    การแก้ปัญหานี้เป็นเรื่องที่คนทำเว็บเจอบ่อยมากครับ เพราะ In-App Browser ของ LINE มักจะมีข้อจำกัดเรื่องการดาวน์โหลดไฟล์หรือการทำงานของบางสคริปต์

    วิธีที่นิยมและได้ผลที่สุดคือการใช้ JavaScript ตรวจสอบ User Agent ว่าผู้ใช้เปิดผ่าน LINE ไหม ถ้าใช่ ให้แสดง Popup แจ้งเตือนพร้อมรูปภาพแนะนำวิธีเปิดใน Browser หลักครับ

    คุณสามารถนำโค้ดด้านล่างนี้ไปปรับใช้ในหน้าเว็บของคุณได้เลยครับ:

    1. โค้ด HTML & CSS (สำหรับหน้าตา Popup)

    วางโค้ดนี้ไว้ในส่วน <body> ของหน้าเว็บ เพื่อสร้าง Popup ที่จะแสดงเฉพาะตอนเปิดใน LINE

    HTML

    <!-- Popup แจ้งเตือนสำหรับผู้ใช้ LINE -->
<div id="line-browser-warning" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 99999; color: white; font-family: sans-serif; padding: 20px; box-sizing: border-box; text-align: center;">
    
    <div style="margin-top: 50px;">
        <h2 style="font-size: 24px; color: #ffcc00; margin-bottom: 15px;">กรุณาเปิดใน Browser ปกติ</h2>
        <p style="font-size: 16px; line-height: 1.5; margin-bottom: 30px;">
            ระบบของ LINE ไม่รองรับการดาวน์โหลดไฟล์ PDF<br>
            เพื่อความสะดวก กรุณาเปิดลิงก์นี้ด้วยเบราว์เซอร์อื่น
        </p>
    </div>

    <!-- ส่วนชี้เป้าไปที่มุมขวาบน/ล่าง (สำหรับ LINE บนมือถือ ปุ่ม 3 จุดจะอยู่มุมขวาบนหรือล่างขึ้นอยู่กับเวอร์ชัน/OS) -->
    <!-- แนะนำให้ทำเป็นรูปภาพหรือไอคอนชี้ไปทางมุมขวา -->
    <div style="position: absolute; bottom: 30px; right: 30px; text-align: right; animation: bounce 1s infinite alternate;">
        <p style="font-size: 16px; margin-bottom: 5px; color: #ffcc00;">กดที่จุด 3 จุดตรงนี้ 🌐</p>
        <span style="font-size: 50px; display: inline-block; transform: rotate(90deg);">👉</span>
    </div>
</div>

<style>
/* เอฟเฟกต์ขยับมือชี้ขึ้นลงให้สะดุดตา */
@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-15px); }
}
</style>

    2. โค้ด JavaScript (สำหรับตรวจจับและสั่งเปิด Popup)

    วางโค้ดนี้ไว้ท้ายไฟล์ก่อนปิด </body> เพื่อเช็คว่าลูกค้าเปิดผ่าน LINE หรือไม่

    JavaScript

    document.addEventListener("DOMContentLoaded", function() {
    var ua = navigator.userAgent || navigator.vendor || window.opera;
    
    // ตรวจสอบว่าใน User Agent มีคำว่า "Line" หรือไม่
    var isLine = (ua.indexOf("Line") > -1);

    if (isLine) {
        // ถ้าเปิดใน LINE ให้แสดง Popup ที่เราสร้างไว้
        document.getElementById("line-browser-warning").style.display = "block";
    }
});

    💡 ทริคเพิ่มเติมที่คุณสามารถเลือกใช้ได้

    ใช้เทคนิคบังคับเปิดเบราว์เซอร์ภายนอกทันที (สไตล์แฮก): มีอีกทริคหนึ่งที่นักพัฒนาชอบใช้คือการใส่ Parameter พิเศษต่อท้ายลิงก์ เช่น ?openExternalBrowser=1 (ใช้ได้ในบางบริบทของ LINE) หรือการแก้ Header ของเซิร์ฟเวอร์ให้ส่งไฟล์เป็น application/octet-stream เพื่อบีบให้สลับแอป แต่การใช้ Popup แจ้งเตือนแบบด้านบน ถือเป็นวิธีที่ชัวร์และปลอดภัยที่สุดครับ

    เปลี่ยนทิศทางมือชี้ตาม OS: ปกติแล้ว LINE ใน iPhone (iOS) ปุ่ม 3 จุดจะอยู่ มุมขวาล่าง แต่ถ้าเป็น Android ปุ่ม 3 จุดมักจะอยู่ มุมขวาบน ถ้าอยากให้เป๊ะขึ้น อาจจะต้องทำลูกศรชี้ทั้งสองจุด หรือเขียนสคริปต์แยก iOS/Android ครับ


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories

Uncategorized