使用Window.open()打开通过JSON文件传递的URL？

Question

我正在为Android和iOS构建一个Ionic应用程序，使用HTML代码。 我试图从存储在服务器上的JSON文件中调用一个名为“link”的字段的链接，但window.open（）无法识别它，有人可以帮忙吗？

<a onClick="window.open({{item.link}}, '_blank', 'location=yes')">

尝试使用href，但它们只会在浏览器中打开链接，在测试时，用户无法返回，必须完全退出应用程序才能返回。任何帮助都将不胜感激。似乎这只发生在iOS上。问题已解决。

<a href="{{item.link}}" onclick="window.open(this.href,'_blank',location=yes); return false;">

- Caolán McKeown

---

你说的是“href”，但它们只会在浏览器中打开链接，这是什么意思？如果你真的想使用onclick属性（这对我来说似乎不是正确的方式），那么至少要在前面加上"javascript:window.open..."。你可能还需要用单引号包装双括号表达式。 - trincot

将{{item.link}}放在引号内。 - Wajih

每当我将双括号表达式用单引号包裹时，它会尝试搜索{{item.link}}而不是我要收集的数据。换句话说，它将{{item.link}}视为数据本身。 - Caolán McKeown

我不熟悉IONIC，但我相当确定它使用AngularJs，对吗？如果是的话，我可以提供帮助。 :) - Dave Amit

任何帮助都将不胜感激。 :) - Caolán McKeown

@CaolánMcKeown，我已经发布了一个js-fiddle和答案，希望这就是您想要做的！ - Dave Amit

Answer 1

你应该使用 href 和 target：

 <a href="{{item.link}}" target="_blank">

根据AngularJS文档，实际上在AngularJS加载之前，您应该防止链接对用户可用，方法如下：

 <a ng-href="{{item.link}}" target="_blank">

或者，如果你真的想使用 onclick，那么添加 "javascript:" 并用单引号包裹链接：

 <a href="#" onclick="javascript:window.open('{{item.link}}', '_blank', 'location=yes')">

使用插件强制“target”链接在外部浏览器中打开

当链接在WebView中打开时，用户无法返回到上一个视图。

本文对此进行了一些阐述：

Luckily there's a cordova.inAppBrowser plug-in that encapsulates this hack in an easy to add plug-in. This is a much simpler solution that doesn't require hacking the generated cordova WebView wrapper code that can be overwritten by updates. The plug-in basically provides the ability for window.open() to open a new window in the external browser.

You can add this plug in with:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

in your Cordova project or – if you're using Visual Studio's Cordova Tools by adding it from the Visual Studio add-in Configuration page.

The plugin basically replaces the window.open() function inside of the WebView control and so causes a new instance of the device browser to open – on iOS that'd be Safari.

- trincot

---

这些示例在模拟器上测试Android时运行良好，但在iOS上它们会使用内置浏览器打开且没有退出的方法。有什么想法吗？ - Caolán McKeown

你是如何创建应用程序的？使用Phonegap吗？还是Cordova？或者这是一个Web应用程序？ - trincot

我正在使用Cordova开发应用程序。 - Caolán McKeown

我认为你需要检查是否已将所有URL列入白名单：请阅读此文档：https://cordova.apache.org/docs/en/4.0.0/guide/appdev/whitelist/。无论如何，你不应该将所有URL都列入白名单。那些没有被列入的URL通常应该留在WebView中。 - trincot

Answer 2

我不熟悉IONIC，但我很确定Ionic使用angularjs，所以...

以下是我使用的方法！

//以下是HTML代码

<div>       
    <div ng-app="sampleApp" ng-controller="MainCtrl">
         <ion-content style="display:block">
         <a href="" ng-click="openUrl(item.link)">Open in new</a>

        </ion-content>
    </div>     
</div>

接下来的控制器

var SampleApp;
(function (SampleApp) {

    var app = angular.module('sampleApp', ['ionic']);    
    app.controller('MainCtrl', function ($scope) {
        $scope.item = {
           link: 'http://example.com'
        }
        $scope.openUrl = function(url){
                  window.open(url, '_blank', 'location=yes')
        }
    });

})(SampleApp || (SampleApp = {}));

JS-Fiddle: http://jsfiddle.net/daveamit/r2c8dfhx/1/

希望这能帮到你！

- Dave Amit

Answer 3

搞定了

<a href="{{item.link}}" onclick="window.open(this.href,'_blank',location=yes); return false;">

- Caolán McKeown

Answer 4

对我来说

<a href="{{item.url}}" onclick="window.open(this.href,'_self');">
   {{menu.title}}
</a>

工作完美。
'location=yes' 产生错误，如下-

2     001637   error    Uncaught ReferenceError: yes is not defined, http://localhost:8100/?ionicplatform=android, Line: 1

现在它运行良好。

- S.Yadav