How to make an external link for apps (PhoneGap)
Question
Being that I am a beginner to programming, I am having trouble making my first app. Using PhoneGap, I zipped my HTML and CSS folders and built them using the PhoneGap Build service. Once there, I followed the steps (using the QR code) to get my app on my Android Tablet. The tablet is an ASUS device. I tested my new app, and everything worked except for the external links. I believe this has something to do with the app not opening the browser when it calls for the link. Any help is appreciated!
Here's one of the pages on my app. It has the most external links on it:
<?xml version="1.0" encoding="UTF-8" ?> <widget xmlns = "https://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.MylesCohenChan.Chair.it.y" versionCode = "1" version = "1.0.0" > <name>Chair.it.y</name> <description> This is a charity organization involving furniture.</description> <author href = "spacerobot.ca" email = "mylescohenchan@gmail.com"> Myles-Cohen Chan </author> <plugin name="cordova-plugin-inappbrowser" source="npm" /> </widget>
body { font-family: arial, sans-serif; } h1 { margin: 10px; padding: 10px 100px 10px 5px; line-height:10px; border-bottom: 1px solid rgb(217, 217, 217); font-size: 100%; } img { height: 40px; width: 170px; } h2 { color: black; text-align: center; font-size: 100%; } a { display: block; text-decoration: none; color: white; } h3 { padding: 10px; text-align: center; font-size: 120%; } div { border-radius: 25px; background: #E74C3C; width: 100px; text-align: center; padding: 10px; } h4 { padding: 10px; font-size: 100%; max-width: 500px; margin: auto; } p { border-radius: 25px; border: 2px solid grey; padding: 8px; background-color: white; max-width: 500px; margin: auto; } ul { padding: 0px; margin: 0px; max-width: 500px; margin: auto; } li { border-radius: 25px; background: steelblue; text-align: center; padding: 10px; margin: 10px; list-style-type: none; background-image: url(images/chevron.png); background-repeat: no-repeat; background-position: right; color: white; } h5 { padding: 10px; font-size: 100%; max-width: 500px; margin: auto; } h6 { padding: 10px; font-size: 100%; max-width: 500px; margin: auto; } div:hover { background: #FF8800; } li:hover { background: #00A1FF; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Donate</title> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="initial-scale=1.0"> <link media="screen" href="Donate.css" type="text/css" rel="stylesheet"> <script language="javascript"> var ua = navigator.userAgent; if (ua.indexOf("iPhone") > 0) { document.location.replace("card.html"); } function switchPage(page){ document.location.replace(page + ".html"); </script> </head> <body background="images/Chair2.jpg"> <h1><img style="display: inline;" src="images/Chair-it-y symbol.png" alt="logo" /></h1> <h2>Donate</h2> <div><a onclick="switchPage('index');">Home</a></div> <h3> Prefered Methods of Donation</h3> <h4>1. Bring It</h4> <p> If you are interested in donating some furniture, one option is to bring it to our store*.<br><br> Once you arive, we can then assist you in unloading your vehicle. When donating, no payment is required, but is suggested so that we can continue to fund Chair-it-y's different departments.<br><br><br> <big>*</big><small><small>Our store does not actually exist, because this is not a real chairity. It is a made-up organization designed for this assignment's purposes.</small></small> </p> <ul> <li><a href="https://www.google.ca/maps/place/Value+Village/@49.2279116,-123.0719501,15z/data=!4m5!3m4 !1s0x5486742462cc4d81:0x73bc6aed39b44a57!8m2!3d49.2263335!4d-123.0 659267">Store Location</a></li> </ul> <h5>2. Mail It</h5> <p> Do you live too far away, or don't have the means to transport your furniture? Well, that's not a problem! You can just mail it to us. <br><br> Using the address givin to you above in the "Store Location" tab, all you have to do is package your item and ship it to us! It's that easy. <br><br><br> <big>*</big><small><small>You don't actually have to package your item, our store does not exist.</small></small> <ul> <li><a href="https://www.canadapost.ca/tools/pg/manual/PGabcmail-e.asp" onclick="window.open(this.href,'_blank'); return false;" >Canada Post Shipping Info</a></li> </ul> <h6>3. Pick Up</h6> <p> Is shipping a problem for you? Well, it's a problem no more! <br><br> Chair-it-y will gladly come right to your doorstep and pick up your furniture, as long as you live within the Greater Vancouver area and schedule the pickup to be between Monday and Friday. If you live outside Greater Vancouver, we can still try to make and effort by meeting somewhere halfway. </p> <ul> <li onclick="switchPage('Email Form');">Schedule a Pickup</li> </ul> </body> </html>
The image file is not included, so when you guys open it should have no logo and background. If you have any questions, just ask them here. Thank You!
2 answers
solution1
0 ACCPTED 2019-01-15 13:11:04
I faced this problem for a very long time thats why i am compelled to advice you on what i did. If you want to display external website, you can but you need to add the inappbrowser plugin to your config.xml file like this:
Then on your html page, use this example :
Canada Post Shipping Info
Try it exactly as written above and check, i hope it helps. Good luck
It might not work if the plugin was added via command. This should fix it, follow these steps: Remove inappbrowser entirely. You can go to the plugin folder and delete it to the trash, however the best way to delete is to navigate to your project folder in terminal if on a mac or cmd if windows. Type in the following command to remove the plugin entirely: cordova plugin remove inappbrowser Once u verify the plugin has been removed, you can verify by the following command cordova plugin -l That command should list all the plugin in your project and if you dont see inappbrowser anymore, that means it has been removed, all u need do now is to go to the Config.xml and add the plugin manually by typing it like so:
The html code should remain the same as the code I gave you earlier, then rebuild ur project normally. Test it with a real device by scanning the QR code bcos if you test with the browser, the link will open in a new tab so u have 2 test with real device or emulator, I hope that helps, let me know.
solution2
0 2019-01-15 16:18:33
1: Install this cordova plugin.
cordova plugin add cordova-plugin-inappbrowser
2: add the link like this.
<a href="#" onclick="window.open('https://www.google.com/', '_blank', 'location=yes');" >Google</a>
for open in INAPPBROWSER use '_blank'
for open in SYSTEM BROWSER use '_system'
check here more details
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.