انشاء زر المشاركة عبر واتساب و مشاركة الرابط و نسخ النص باستخدام html و JavaScript

Mohamed Mohamed1 · 19 يوليو 2022

محتاج كود html لكتابة النص بخط كبير مع التحكم فى اللوان وعمل اطار مربع للنص وعمل نسخ النص ومشاركة النص زي الي في الصورة دي

عمر قره محمد · 19 يوليو 2022

بتاريخ 1 ساعة قال Mohamed Mohamed1:

محتاج كود html لكتابة النص بخط كبير مع التحكم فى اللوان وعمل اطار مربع للنص وعمل نسخ النص ومشاركة النص زي الي في الصورة دي

ماهو الامر الذي تريد الاستفسار عنه تحديداً ؟

يمكنك تنفيذ الازرار الثلاثة التي تطلبها بشكل مشابه للتالي :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="text">
        <p class="textToShare">النص المخصص للنسخ</p>
        <a class="whatsapp" href="whatsapp://send?text=Hello%20World!">Share with whatsapp</a>
        <button class="Share">Share</button>
        <button class="copy">copy</button>
    </div>
    <div class="text">
        <p class="textToShare">النص المخصص للنسخ</p>
        <a class="whatsapp" href="whatsapp://send?text=Hello%20World!">Share with whatsapp</a>
        <button class="Share">Share</button>
        <button class="copy">copy</button>
    </div>

        <script>
        const textContainers = document.getElementsByClassName("text");
        Array.from(textContainers).forEach((element, index) => {
            const textToShare = document.getElementsByClassName("textToShare")[index]
            // الكود الخاص بالمشاركة عبر واتساب
            const href = "whatsapp://send?text=" + textToShare.innerText;
            const whatsapp = document.getElementsByClassName("whatsapp")[index]
            whatsapp.addEventListener("click", () => {
                location.assign(href)
            })
            // الكود الخاص بنسخ النص
            const copy = document.getElementsByClassName("copy")[index]
            copy.addEventListener("click", () => {
                navigator.clipboard.writeText(textToShare.innerText);
                alert("تم نسخ النص " + textToShare.innerText)
            })
            // الكود الخاص بالمشاركة
            const Share = document.getElementsByClassName("Share")[index]
            Share.addEventListener("click", async () => {
                const shareData = {
                    title: 'مشاركة النص',
                    text: textToShare.innerText,
                    url: location.href
                }
                await navigator.share(shareData)
            })
        });
    </script>
</body>

</html>

لاحظ كيف وضعنا العناصر الخاصة بكل زر وكذلك العنصر الخاص بالنص داخل div واعطيناه كلاس test وكذلك اعطينا الكلاسات textToShare و whatsapp و Share و copy للازرار ، وهذا لنستطيع التحكم بالازرار في js وكذلك في الـ css.

وفي البداية قمنا باحضار الـ div الحاوي على كل العناصر باستخدام الكود :

const textContainers = document.getElementsByClassName("text");

واستخدمنا الكود التالي لتحويله إلى array عادي وذلك لأنه لايمكننا استخدام الـ forEach على العنصر textContainers مباشرةً :

Array.from(textContainers).forEach((element, index) => {...}

لاحظ كيف قمنا باستدعاء العنصر الحاوي النص المراد مشاركته:

const textToShare = document.getElementsByClassName("textToShare")[index]

حيث الـ [index] هنا تقوم بالاشارة لـ رقم الـ div الحاوي على العناصر، فنحن نريد ان نحصل على النص الخاص بال div عندما يقوم الشخص بالنقر على اي زر موجود بالـ div الأول.

ثم قمنا بإنشاء الـ herf الخاص بواتساب :

const href = "whatsapp://send?text=" + textToShare.innerText;

ووضعنا الـ innerText للحصول على النص الموجود داخل الـ textToShare التي حددناها في الخطوة السابقة.

بعد ذلك قمنا بإستدعاء الزر الخاص بالمشاركة عبر واتساب والخاص بالـ div بنفس الطريقة الخاصة بالنص الذي نريد مشاركته.

ثم قمنا بإنشاء الـ event الخاص بالنقر على زر المشاركة عبر واتساب :

const whatsapp = document.getElementsByClassName("whatsapp")[index]
whatsapp.addEventListener("click", () => {
	location.assign(href)
})

حيث ان الـ location.assign مماثلة للنقر على العنصر a في html.

وبعد ذلك قمنا بإعادة العملية بالنسبة لكل من الزر صاحب الكلاس copy والزر صاحب الكلاس Share :

const copy = document.getElementsByClassName("copy")[index]          
copy.addEventListener("click", () => {
  navigator.clipboard.writeText(textToShare.innerText);
  alert("تم نسخ النص " + textToShare.innerText)
})

const Share = document.getElementsByClassName("Share")[index]
Share.addEventListener("click", () => {
  const shareData = {
    title: 'مشاركة النص',
    text: textToShare.innerText,
    url: location.href
  }
  navigator.share(shareData)
})

حيث ان الـ navigator.clipboard.writeText و الـ navigator.share هي وظائف مبنية في js.

انشاء زر المشاركة عبر واتساب و مشاركة الرابط و نسخ النص باستخدام html و JavaScript

السؤال

Mohamed Mohamed1

1 جواب على هذا السؤال

Recommended Posts

عمر قره محمد

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية