如何为应用程序建立外部链接（PhoneGap）
[英]How to make an external link for apps (PhoneGap)
问题描述
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. 使用PhoneGap，我压缩了HTML和CSS文件夹，并使用PhoneGap Build服务构建了它们。 Once there, I followed the steps (using the QR code) to get my app on my Android Tablet. 到达那里后，我按照步骤（使用QR码）将我的应用安装到Android平板电脑上。 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 个解决方案
解决方案1
0 已采纳 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: 如果要显示外部网站，可以，但是需要将inappbrowser插件添加到config.xml文件中，如下所示：
Then on your html page, use this example : 然后在您的html页面上，使用以下示例：
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. 这应该可以解决，请按照下列步骤操作：完全删除inappbrowser。 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. 您可以转到plugin文件夹，然后将其删除到回收站中，但是，最好的删除方法是在Mac上的终端中导航到您的项目文件夹，在Windows上则是cmd。 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: 键入以下命令以完全删除该插件：cordova plugin remove inappbrowser一旦您验证了该插件已被删除，您就可以通过以下命令进行验证cordova plugin -l该命令应列出您项目中的所有插件，如果看不到不再是inappbrowser，这意味着它已被删除，您现在要做的就是进入Config.xml并通过手动键入插件来添加插件，如下所示：
The html code should remain the same as the code I gave you earlier, then rebuild ur project normally. html代码应与我之前给您的代码相同，然后正常重建项目。 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. 如果您使用浏览器进行测试，则通过扫描QR码bcos在真实设备上对其进行测试，该链接将在新标签中打开，因此您可以使用真实设备或模拟器进行2次测试，希望对您有所帮助。
解决方案2
0 2019-01-15 16:18:33
1: Install this cordova plugin. 1：安装此cordova插件。
cordova plugin add cordova-plugin-inappbrowser
2: add the link like this. 2：添加这样的链接。
<a href="#" onclick="window.open('https://www.google.com/', '_blank', 'location=yes');" >Google</a>
for open in INAPPBROWSER use '_blank' 在INAPPBROWSER中打开使用'_blank'
for open in SYSTEM BROWSER use '_system' 在SYSTEM BROWSER中打开使用'_system'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.