如何为应用程序制作外部 link (PhoneGap)

Question

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

这是我的应用程序中的一个页面。它有最多的外部 links：

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

没有包含图片文件，所以大家打开的时候应该是没有logo和背景的。如果您有任何问题，请在这里提问。谢谢！

Answer 1

我面对这个问题很长时间了，这就是为什么我不得不就我所做的事情向您提出建议。如果你想显示外部网站，你可以，但你需要将 inappbrowser 插件添加到你的 config.xml 文件中，如下所示：

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

加拿大Post送货信息

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

如果插件是通过命令添加的，则可能无法正常工作。这应该可以解决它，请按照下列步骤操作：完全删除 inappbrowser。您可以转到插件文件夹并将其删除到垃圾箱，但是最好的删除方法是在 mac 上导航到终端中的项目文件夹，或者在 windows 上导航到 cmd 中的项目文件夹。输入以下命令以完全删除插件： cordova插件删除inappbrowser 一旦您确认插件已被删除，您可以通过以下命令进行验证科尔多瓦插件-l 该命令应列出项目中的所有插件，如果您不再看到 inappbrowser，则意味着它已被删除，您现在需要做的就是转到 Config.xml 并通过像这样输入来手动添加插件:

html 代码应该与我之前给你的代码保持一致，然后正常重建你的项目。如果您使用浏览器测试，请通过扫描二维码在真实设备上进行测试 bcos，link 将在新选项卡中打开，因此您可以使用真实设备或模拟器进行 2 次测试，希望对您有所帮助，让我知道.

Answer 2

1: 安装这个 cordova 插件。

cordova plugin add cordova-plugin-inappbrowser

2：像这样添加link。

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

在 INAPPBROWSER 中打开使用 '_blank'

在系统浏览器中打开使用 '_system'

在这里查看更多 details

如何为应用程序制作外部 link (PhoneGap)

How to make an external link for apps (PhoneGap)

html

javascript

css

android

phonegap