اذهب إلى المحتوى
  • 0

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

Mohamed Mohamed1

السؤال

Recommended Posts

  • 0
بتاريخ 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.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...