How to solve missing Javascript in loaded external page in PhoneGap?

PhoneGap is a cool platform that let you build mobile application with your web skill, and often, reuse your web resource to consist as a part of your mobile application.

So PhoneGap use the concept that called ‘White list’, a set of domain’s name syntax that has been written to allow application to access external resource in the Internet. Those resource can be anything, such as image file, web service, or even the whole web page.

(Take a look on how to write white list for your PhoneGap application here)

The problem when the application load and import external web page

If you use JQuery Mobile as a core framework. You will found that <a> can be used to browse and load external page from Internet into your application easily.

[code lang=”html”] <a href=”” data-role=”button”>Official Website</a>

This is very cool. But you may found yourselves stuck in a loaded web page, but its function doesn’t work or the presentation looks strange, then you might realize

“What is happening to those Javascript and CSS?”

Let’s take a look what cause this.

What’s happen?

The reason that make loaded web page doesn’t work as you expect, is simple mistake.

Because those web page is common web page. This common web page always consisted with external Javascript and CSS file.

Sometime, these external files comes from public web API, such as Google API or Facebook API, and they aren’t hosted on your server, specifically, in the domain’s name you put into white list. The white list will detect those unlisted domain’s names, then reject them.

So you might see the web page there, but it just doesn’t work. Normally, you can check log file that white list rejects external Javascript file.

Example of missing domain for any javascript file which used by importing external web page into phonegap application
Log shows rejection of external Javascript file from loaded external web page

How to solve the problem?

We have to put those domain’s name into white list. The application won’t reject external Javascript or CSS file that comes with the web page.

In the other hand, the rejection can be used to find any harmful script which may included in the HTML file you’re loading into your application.

What’s next?

This problem can happen to every people who just start to use PhoneGap to build their application. The white list concept is easy to understand, but something might be skipped, yes, I did it before and hope this may help you out from your problem.

Please feel free to share your thought below, is there any more problem about white list?

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active