جافاسكريبت - كيف توقف تحديث الصفحة الأم بينما تكون نافذة الطفل مفتوحة؟

عندما أنقر على الرابط لفتح نافذة فرعية، يتم تحديث الصفحة الرئيسية تلقائيًا. كيف يمكنني إيقاف ذلك؟

يجب ألا يتم تحديث الصفحة الرئيسية أثناء فتح نافذة فرعية. كيف يمكن فعل ذلك؟ أرجو المساعدة.

رمزي كما هو مذكور أدناه:

<html>
<head>
<title>login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var popup;
function ShowPopup(url) {
if(popup)
    {
     popup.close();
     }
    popup = window.open(url, "self", "toolbar=no,scrollbars=yes,location=no,statusbar=no,menubar=no,resizable=0,width=300,height=350,left = 0,top = 0");
        popup.focus();
 }
</script>

</head>

<body>
<a href="" onclick="ShowPopup('popup_login.asp')" style="color: #1686CC;">Sign In / Register</a>
</body>
</html>

الإجابة رقم 1

تتم إعادة تحميل صفحتك لأنه ليس فقط يتم استدعاء الدالة الخاصة بك، ولكن أيضًا يتم تنفيذ الرابط المشار إليه بواسطة وسم a. لذلك، هناك شيئين يحدثان في نفس الوقت:

• يؤدي الرابط نفسه إلى الانتقال إلى ما هو موجود في سمة href، حتى لو كانت فارغة. إذا كانت href فارغة فهذا يعني: إعادة تحميل هذه الصفحة.
• معالج حدث onclick يقوم أيضًا بشيء ما (فتح نافذة منبثقة)، ولكنه حاليًا لا يلغي التأثير الأول.

في رد الفعل الأول ، قد يقوم المرء ببساطة بإزالة سمة href المخالفة. هذا يحل المشكلة، لكنه يسبب مشكلة أخرى: تفقد كل التنسيقات الجميلة لنص الرابط المعروض (مثل التسطير، اللون، تغيير المؤشر، ترتيب التبويب، ...)، وهو شيء لا تريده عادةً.

إليك بعض الحلول الأكثر ملاءمة:

دع معالج حدث onclick يُرجع false

إرجاع false سيُلغي السلوك الافتراضي للعنصر a وسيتم تجاهل محتوى الخاصية href:

onclick="ShowPopup('popup_login.asp'); return false;" 

إذا كنت تهتم بالمتصفحات التي لا تدعم جافاسكريبت (أو تم تعطيلها)، فعندئذ ضع رابطًا احتياطيًا مفيدًا url في الخاصية href، مثل:

href="javascript_is_required.html"

استخدم event.preventDefault

هذا بديل لـ return false، وله ميزة أنه يمكنك جعله ينفذ كأول تعليمة، بحيث إذا حدث خطأ وقت التشغيل في الكود الآخر، فإنه يكون قد أنجز عمله بالفعل:

onclick="event.preventDefault();ShowPopup('popup_login.asp');"

لاحظ أن كائن event هذا معرف من قبل جميع المتصفحات في سياق خصائص الأحداث، ويجب تمييزه عن كائن window.event، الذي لا تدعمه جميع المتصفحات.

استخدم تدوين الهاش في href

امنح المرساة اسماً ثم أشر إلى هذا الاسم في سمة href. بهذه الطريقة، ستتنقل المرساة نفسها إلى العرض، وهو ما تكون عليه عادةً عندما ينقر المستخدم عليها:

name="loginlink" href="#loginlink" 

سترى غالبًا النسخة الأقصر href="#"، لكن هذا سيؤدي إلى التمرير إلى أعلى الصفحة عند النقر عليه، مما قد يكون مقبولًا إذا كنت متأكدًا أن الصفحة ليست متمركزة لأسفل. ومع ذلك، فإن استخدام "#" له أثر جانبي: عند النقر عليه يتغير url ويتم وضع url السابقة في سجل المتصفح. لذلك إذا نقرت على الرابط ثم ضغطت زر الرجوع، ستبقى على الصفحة. قد يكون هذا غير مرغوب.

استخدم بروتوكول javascript: لعدم القيام بأي شيء

href="javascript:" 

سيجعل هذا الرابط التشعبي ينفذ أي جافاسكريبت بعد النقطتين، ونظرًا لعدم وجود أي شيء هناك، فلن يحدث شيء. لن يتم تعديل سجل المتصفح. هناك اختلافات لهذه الطريقة، مثل javascript: return false; أو javascript: void(0);

استخدم بروتوكول javascript: للتعامل مع حدث click

مع هذا الحل، لن تستخدم بعد الآن سمة onclick. بدلاً من ذلك، تنقل الكود إلى سمة href:

href="javascript: ShowPopup('popup_login.asp');"

فصل التنسيق عن الكود

الكود الأصلي وجميع الحلول أعلاه لا تزال لديها مشكلة لا يحبها العديد من المطورين: HTML مختلط مع كود javascript. من الأفضل فصل هذين الاثنين.

يمكن القيام بذلك على النحو التالي:

<a href="javascript_is_required.html" id="loginLink"
   title="Click here to log on"> ... </a>
...
<script>
    document.getElementById('mylink').onclick = function(e) {
        e = e || event; // cross-browser way to get event object
        e.preventDefault(); // cancel the default click behaviour
        ShowPopup('popup_login.asp'); // your custom code comes here
        return false; // cancel the default click behaviour
    };
</script>

سيقول القليل أن لهذا أيضًا جانباً سلبياً: من الأصعب تحديد الكود الذي يتم تنفيذه عند النقر. الكود أعلاه سيقوم بإرفاق معالج الحدث لحدث click لعنصر mylink. تأكد من تنفيذه فقط بعد تحميل المستند. يلغي معالج الحدث السلوك الافتراضي للنقر بطريقتين. اختر الطريقة التي تفضلها، أو كليهما إذا أحببت. وبما أنه تم إلغاؤه، فإن الانتقال إلى قيمة سمة href لا يتم تنفيذه أبدًا. السطر الأول يتعامل مع خصائص المتصفح حيث أن متصفحات IE القديمة لا تمرر كائن الحدث كوسيط إلى معالج الحدث، بل تكشف عن كائن event عالمي بدلاً من ذلك.

إذا لم يكن عليك دعم المتصفحات القديمة قبل IE9، يمكنك تحسين الكود أكثر باستخدام addEventListener('click', myfunction); بدلاً من onclick=myfunction; في الكود أعلاه. هذا له العديد من المزايا: يمكن ربط المزيد من معالجات الأحداث بنفس الحدث، ويمكنك أيضًا إزالتها واحدة تلو الأخرى. jQuery يقدم دعمًا جيدًا للمتصفحات المختلفة لذلك باستخدام .on().

هناك عدة تنويعات على الحلول المذكورة أعلاه، كلها لها فوائدها وعيوبها. يمكنك حتى الابتعاد عن استخدام رابط لهذا الغرض واستخدام عنصر آخر بدلاً منه مع إضافة تنسيق إليه.

الإجابة رقم 2

اكتب return false(); بعد الطريقة window.open() في JavaScript.

في حال لم يعمل المقتطف أعلاه، قم بتغيير وسم <button> الافتراضي إلى وسم <input> عادي مع type="button". هذا سيحل المشكلة.

فيما يلي مقتطف الشيفرة:

جافاسكريبت

<script>
  function tagedlist() { 
    window.open("http://w3schools.com","mywindow","menubar=1,resizable=1,width=1000,height=1000");
    return false;           
  }
</script>