我正在尝试从PhoneGap应用程序在Safari(在iPhone上)中打开链接。我使用的是PhoneGap版本3.1.0,并使用PhoneGap Build来构建应用程序。
我在页面上有两个链接(如下所示 www/index.html)。这两个链接都在PhoneGap应用程序中打开。我可以看到PhoneGap已正确加载,因为alert('设备就绪!')被触发。
我需要更改什么才能在默认浏览器中(应用程序外部)打开链接?
www/config.xml 文件如下所示:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.company.appname" version="0.0.3">
<name>AppName</name>
<description>description</description>
<author href="http://www.example.com/" email="hello@example.com">
Company
</author>
<preference name="phonegap-version" value="3.1.0" />
<preference name="orientation" value="portrait" />
<preference name="stay-in-webview" value="false" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.3" />
<gap:plugin name="org.apache.cordova.dialogs" version="0.2.2" />
<gap:plugin name="com.phonegap.plugins.pushplugin" version="2.0.5" />
<plugins>
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
</plugins>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<access origin="*" />
</widget>
www/index.html 文件如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Test application</title>
</head>
<body>
<a href="#" onclick="openUrl('http://www.google.com/'); return false;">Link test 1</a>
<a href="#" onclick="window.open('http://www.google.com/', '_system', 'location=yes'); return false;">Test link 2</a>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function openUrl(url) {
alert("open url: " + url);
window.open(url, '_blank', 'location=yes');
}
function onDeviceReady() {
alert('device ready!');
}
$(function() {
document.addEventListener("deviceready", onDeviceReady, true);
});
</script>
</body>
</html>
以下是项目结构:
├── platforms
├── plugins
│ └── org.apache.cordova.inappbrowser
│ ├── LICENSE
│ ├── package.json
│ ├── plugin.xml
│ ├── README.md
│ ├── RELEASENOTES.md
│ ├── src
│ │ ├── android
│ │ │ ├── InAppBrowser.java
│ │ │ └── InAppChromeClient.java
│ │ ├── blackberry10
│ │ │ └── README.md
│ │ ├── ios
│ │ │ ├── CDVInAppBrowser.h
│ │ │ └── CDVInAppBrowser.m
│ │ └── wp
│ │ └── InAppBrowser.cs
│ └── www
│ ├── InAppBrowser.js
│ └── windows8
│ └── InAppBrowserProxy.js
├── README.md
└── www
├── config.xml
├── cordova.js
├── index.html
├── js
│ └── jquery-1.9.1.js
└── phonegap.js
这就是我在Cordova/Phonegap 3.6.3中解决的方式
安装 inappbroswer cordova 插件:
cordova plugin add org.apache.cordova.inappbrowser
我想让我的Phonegap应用程序尽可能与标准网页相似:我希望通过在链接上显示target="_blank",它将在外部页面中打开。
这就是我实现它的方式:
$("a[target='_blank']").click(function(e){
e.preventDefault();
window.open($(e.currentTarget).attr('href'), '_system', '');
});
所以我所要做的就是使用如下所示的链接
<a href="http://www.example.com" target="_blank">Link</a>
这个怎么样?
<a href="#" onclick="window.open(encodeURI('http://www.google.com/'), '_system')">Test link 2</a>
编辑:
这可能涉及:如何在点击事件中调用多个 JavaScript 函数?
我在想,这个怎么样:
添加到代码:
$(".navLink").on('tap', function (e) {
//Prevents Default Behavior
e.preventDefault();
// Calls Your Function with the URL from the custom data attribute
openUrl($(this).data('url'), '_system');
});
然后:
<a href="#" class="navLink" data-url="http://www.google.com/">Go to Google</a>
你应该在配置中使用 gap:plugin 标签和完全限定的 id.xml来安装插件:
<gap:plugin name="org.apache.cordova.inappbrowser" />
如此处所述。
我正在使用 cordova 6.0,这是我的解决方案:
1:安装这个科尔多瓦插件。
cordova plugin add cordova-plugin-inappbrowser
2:在HTML中添加打开链接,如下所示。
<a href="#" onclick="window.open('https://www.google.com/', '_system', 'location=yes');" >Google</a>
3:这是最重要的一步,因此我遇到了很多问题:下载cordova.js
文件并将其粘贴到www
文件夹中。然后在index.html
文件中对此进行引用。
<script src="cordova.js"></script>
此解决方案适用于安卓和iPhone环境。
尝试下面的例子。
<a class="appopen" onClick="OpenLink();">Sign in</a>
<script>
function OpenLink(){
window.open("http://www.google.com/", "_system");
}
</script>
在配置中添加此行.xml如果您使用的是PhoneGap版本3.1或更高版本
<gap:plugin name="org.apache.cordova.inappbrowser" />
我遇到了与您相同的问题,解决方案是在我将使用 InAppBrowser 的所有页面中将 phonegap.js 文件包含在<head>
中。
你所有的代码都没问题!您唯一需要添加的是:<script src="phonegap.js"></script>
index.html
的<head>
部分中
这有点奇怪,因为Phonegap在他的插件文档部分说:
"如果插件利用
js-module
元素来指示科尔多瓦加载 插件JavaScript,则不需要<script>
引用 以加载插件。核心科尔多瓦插件就是这种情况"
InAppBrowser是一个核心的cordova插件。但是由于某种奇怪的原因,在将其包含在phonegap.js
文件(至少在 0.3.3 版本中)之前,它不起作用。
注意:我发现了一个错误。有人说你必须包括3个文件:phonegap.js
,cordova.js
和cordova_plugins.js
。但是当我包含这 3 个文件时,我的应用程序在 iOS 7 中运行良好,但在 iOS 6 中忽略插件的使用(使用:Cordova 3.3.0 + Phonegap Build + InAppBrowser 0.3.3)。
您可以在我的 SO 问题中看到更多。
希望这能帮助你!
回答晚了,但也许对某人有帮助。所以我在基于 Cordova 的 iOS 和 Android 应用程序中的工作代码中有什么。要在默认浏览器(Safari 或 Google)中打开外部链接:
1)确保您有应用程序浏览器插件
cordova plugin add cordova-plugin-inappbrowser --save
2) 添加到设备.js
function openURL(urlString){
let url = encodeURI(urlString);
window.open(url, '_system', 'location=yes');
}
3) 创建新链接
<a href="#" onClick="openURL('http://www.google.com')">Go to Google</a>
对于 iOS,请在 MainViewController.m 中执行以下操作
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *url = [request URL];
if (![url isFileURL] && navigationType == UIWebViewNavigationTypeLinkClicked)
{
if ([[UIApplication sharedApplication] canOpenURL:url]) {
[[UIApplication sharedApplication] openURL:url];
return NO;
}
}
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
编辑:对于Android,在CordovaWebViewClient.java中,在shouldOverrideUrlLoad中执行以下操作:
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if(/*check if not external link*) {
view.loadUrl(url);
} else {
//prepend http:// or https:// if needed
Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(i);
}
return true;
}
这在iOS上对我来说非常有效。
如上面的链接所述:
1-使用以下命令安装插件:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
2-在HTML文件中,根据需要使用以下方法之一:
window.open(‘http://example.com’, ‘_system’); Loads in the system browser
window.open(‘http://example.com’, ‘_blank’); Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view
我改编了pastullo的答案,使其也可以在可以在cordova InAppBrowser中打开的WebApp中工作,也可以使用普通Web应用程序(例如用于测试):
function initOpenURLExternally() {
$("a[target='_blank'],a[target='_system']").each(function (i) {
var $this = $(this);
var href = $this.attr('href');
if (href !== "#") {
$this
.attr("onclick", "openURLExternally("" + href + ""); return false;")
.attr("href", "#");
}
});
}
function openURLExternally(url) {
// if cordova is bundeled with the app (remote injection plugin)
log.trace("openURLExternally: ", url);
if (typeof cordova === "object") {
log.trace("cordova exists ... " + typeof cordova.InAppBrowser);
if (typeof cordova.InAppBrowser === "object") {
log.trace("InAppBrowser exists");
cordova.InAppBrowser.open(url, "_system");
return;
}
}
// fallback if no cordova is around us:
//window.open(url, '_system', '');
window.open(url, '_blank', '');
}
这就是我让我工作的方式。
- 在配置中.xml(电话间隙)添加
<gap:plugin name="org.apache.cordova.inappbrowser" />
- 我的hrefs如下所示:
<a onclick='window.open("http://link.com","_system", "location=yes")' href='javascript:void(0)' >link</a>
- 非常重要,我从一开始就缺少什么,在您的标题中添加 cordova 脚本:
<script src="cordova.js"></script>
我不知道为什么,但对我来说,没有它它就不起作用。
希望这会有所帮助
可能是它有一个 PATH 环境变量问题,试试这个链接可能会有所帮助。
Apache Cordova文档
Phonegap/Cordova——如何链接到外部页面
编辑配置.xml在插件条目中添加源= "npm"。<'gap:plugin name="org.apache.cordova.inappbrowser" source="npm
target="_blank"
,对您希望在外部浏览器(应用程序外部)打开的链接使用 target="_system"
。然后,当单击这些链接时,您的设备将从您的应用程序切换到系统的浏览器应用程序(即。Safari 或 Chrome)以打开链接。
在原始问题中没有发现它的人,您还需要通过向配置添加访问标记来确保您尝试打开的 URL 未列入白名单.xml如下所示:
<access origin="http://www.example.com" />
或者你可以做
<access origin="*" />
允许任何内容
如果您尝试在外部Web浏览器中打开链接,请尝试使用class="external"作为锚标记。
<a class="external" href="www.google.com" >Link</a>
希望这有帮助!