Cordova - InAppBrowser كوردوفا - InAppBrowser

 Cordova - InAppBrowser كوردوفا - InAppBrowser

يستخدم هذا المكون الإضافي لفتح متصفح الويب داخل تطبيق كوردوفا.

الخطوة 1 - تثبيت البرنامج المساعد

نحتاج إلى تثبيت هذا المكون الإضافي في نافذة موجه الأوامر قبل أن نتمكن من استخدامه.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

الخطوة 2 - إضافة زر

سنضيف زرًا واحدًا سيتم استخدامه لفتح نافذة inAppBrowser في index.html .

الخطوة 3 - إضافة مستمع الحدث

الآن دعنا نضيف مستمع الحدث لزرنا في وظيفة onDeviceReady في index.js .

document.getElementById("openBrowser").addEventListener("click", openBrowser);

الخطوة 4 - إنشاء الوظيفة

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

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

إذا ضغطنا على الزر BROWSER ، فسنرى الإخراج التالي على الشاشة.

سوف تستمع وحدة التحكم أيضًا إلى الأحداث. سيتم تشغيل حدث loadstart عند بدء تحميل URL وسيتم تشغيل loadstop عند تحميل URL. يمكننا رؤيته في وحدة التحكم.

بمجرد إغلاق المتصفح ، سيتم إطلاق حدث الخروج .

هناك خيارات أخرى ممكنة لنافذة InAppBrowser. سنشرح ذلك في الجدول أدناه.

التسلسل	الخيار والتفاصيل
1	location يُستخدم لتشغيل شريط موقع المتصفح أو إيقاف تشغيله. القيم هي نعم أم لا .
2	hidden تستخدم لإخفاء أو إظهار inAppBrowser. القيم هي نعم أم لا .
3	مسح ذاكرة التخزين المؤقت clearCache تستخدم لمسح ذاكرة التخزين المؤقت لملفات تعريف الارتباط للمتصفح. القيم هي نعم أم لا .
4	clearsessioncache يُستخدم لمسح ذاكرة التخزين المؤقت لملفات تعريف الارتباط للجلسة. القيم هي نعم أم لا .
5	تكبيرzoom تُستخدم لإخفاء أو إظهار عناصر التحكم في التكبير في متصفح Android. القيم هي نعم أم لا .
6	hardwareback نعم لاستخدام زر رجوع الجهاز للعودة إلى سجل المتصفح. لا لإغلاق المتصفح بمجرد النقر فوق زر الرجوع.

يمكننا استخدام متغير المرجع (المرجع) لبعض الوظائف الأخرى. سوف نعرض لك أمثلة سريعة على ذلك. لإزالة مستمعي الأحداث يمكننا استخدام -

ref.removeEventListener(eventname, callback); 

لإغلاق InAppBrowser يمكننا استخدام -

ref.close();

إذا فتحنا نافذة مخفية ، يمكننا إظهارها -

ref.show();

يمكن حتى إدخال كود JavaScript في InAppBrowser -

var details = "javascript/file/url"
ref.executeScript(details, callback);

يمكن استخدام نفس المفهوم لحقن CSS -

var details = "css/file/url"
ref.inserCSS(details, callback);