Question

由于我是编程的初学者，因此我在制作第一个应用程序时遇到了麻烦。使用PhoneGap，我压缩了HTML和CSS文件夹，并使用PhoneGap Build服务构建了它们。到达那里后，我按照步骤（使用QR码）将我的应用安装到Android平板电脑上。平板电脑是华硕的设备。我测试了我的新应用程序，除外部链接外，其他所有功能均正常。我认为这与应用程序在调用链接时未打开浏览器有关。任何帮助表示赞赏！

这是我应用程序中的页面之一。它具有最外部的链接：

<?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>

该图像文件不包括在内，因此当您打开该文件时，它应没有徽标和背景。如有任何疑问，请在这里提问。谢谢！

Answer 1

我很长一段时间都遇到了这个问题，这就是为什么我被迫向我提出建议的原因。如果要显示外部网站，可以，但是需要将inappbrowser插件添加到config.xml文件中，如下所示：

然后在您的html页面上，使用以下示例：

加拿大邮政寄送信息

请完全按照上面的说明尝试并检查，希望对您有所帮助。祝你好运

如果通过命令添加了插件，则可能无法正常工作。这应该解决它，请按照下列步骤操作：完全删除内置浏览器。您可以转到plugin文件夹，然后将其删除到回收站中，但是，最好的删除方法是在Mac上的终端中导航到您的项目文件夹，在Windows上则是cmd。输入以下命令以完全删除该插件：科尔多瓦插件删除inappbrowser 验证插件已删除后，您可以通过以下命令进行验证科尔多瓦插件-l 该命令应该列出项目中的所有插件，如果您再也看不到inappbrowser，则意味着它已被删除，您现在需要做的就是进入Config.xml并通过手动键入来添加插件，如下所示：< / p>

html代码应与我之前给您的代码相同，然后正常重建您的项目。如果您使用浏览器进行测试，则通过扫描QR码bcos在真实设备上进行测试，该链接将在新标签中打开，因此您可以使用真实设备或模拟器进行2次测试，希望对您有所帮助。

Answer 2

1：安装此cordova插件。

cordova plugin add cordova-plugin-inappbrowser

2：像这样添加链接。

<a href="#" onclick="window.open('https://www.google.com/', '_blank', 'location=yes');" >Google</a>

要在INAPPBROWSER中打开，请使用'_blank'

要在SYSTEM BROWSER中打开，请使用'_system'

在此处查看更多details

如何为应用程序建立外部链接（PhoneGap）

2 个答案: