Cordova，为什么需要 InAppBrowser 插件才能在系统浏览器中打开链接

问题描述

我有一个 Cordova 应用程序，它是一个带有单个 HTML 文件的单页应用程序.

I have a Cordova app, it is a single page application with a single HTML file.

所有链接都应在系统浏览器中打开.我不想要嵌入式"InAppBrowser，而是真正的本机系统/外部浏览器.

All links should open in the system browser. I don't want an "embedded" InAppBrowser but really the native system / external browser.

我们可以在任何地方找到使用 InAppBrowser 的代码示例，例如:

Everywhere we can find example of code using InAppBrowser with something like:

window.open('http://apache.org', '_system');

但是为什么我们需要安装 InAppBrowser，即使我们甚至不打算使用嵌入式浏览器?

But why do we need to install InAppBrowser, even if we don't even plan to use an embedded browser?

关于链接的目标，有人真的能解释一下 WebView 的行为吗?目前尚不清楚它应该对 target=_blank 做什么，但除了打开一个新的浏览器窗口之外，我看不到它可以做什么.

Can someone really expain what is supposed to be the behavior of a WebView, regarding the target of a link. It is not clear what it is supposed to do with a target=_blank, but I don't see anything else it can do except opening a new browser window.

请注意，问题似乎只出现在 iOS 上，因为使用 target=_blank 的 Android(带有 Crosswalk 插件)似乎总是可以正常工作并在新的本机浏览器窗口中打开.

Notice that the problem seems to only be with iOS because with Android (with Crosswalk plugin) using target=_blank seems to always work fine and open in a new native browser window.

推荐答案

所以我用我的发现来回答我自己的问题.注意我只处理 Cordova 5.1.1 上的 iOS 和 Android(带有 Crosswalk 插件)，可能不适用于其他平台/版本.

So I'm answering my own question with what I've found out. Note I'm only dealing with iOS and Android (with Crosswalk plugin) on Cordova 5.1.1, and it may not apply to other platforms/versions.

即使您不需要嵌入式浏览器，也需要 InAppBrowser 插件.这使得 _system 目标可用，触发本机插件代码打开系统/外部浏览器.

Even if you don't need an embedded browser, InAppBrowser plugin is required. This makes the _system target available that triggers native plugin code to open the system/external browser.

所以看起来这个插件在某种程度上是一个二合一"插件:允许使用嵌入式浏览器+允许安全强制打开外部系统浏览器.

So it seems the plugin is somehow a "2 in 1" plugin: it permits to use an embedded browser + it permits to securely force the external system browser to open.

目前尚不清楚默认的 WebView 行为相对于 _blank 链接应该是什么(也不清楚它是否以任何方式针对 WebView 进行标准化)，但我发现无法打开外部浏览器没有此插件或本机代码的 iOS.

It is not clear what the default WebView behavior should be relative to _blank links (nor if it is standardized in any way for WebViews) but I've found no way to open the external browser on iOS without this plugin or native code.

如果你像我一样不关心嵌入式浏览器，而只想在现有应用程序中将所有 _blank 目标打开到本机外部浏览器，而不会有太多痛苦(特别是如果应用程序也是一个移动网站...)，您可以在您的应用程序开头运行以下代码:

If like me you don't care about the embedded browser, but just want to open all _blank targets to the native external browser in an existing app, without too much pain (particularly if the app is also a mobile website...), you can run the following code at the beginning of your app:

    function openAllLinksWithBlankTargetInSystemBrowser() {
        if ( typeof cordova === "undefined" || !cordova.InAppBrowser ) {
            throw new Error("You are trying to run this code for a non-cordova project, " +
                    "or did not install the cordova InAppBrowser plugin");
        }

        // Currently (for retrocompatibility reasons) the plugin automagically wrap window.open
        // We don't want the plugin to always be run: we want to call it explicitly when needed
        // See https://issues.apache.org/jira/browse/CB-9573
        delete window.open; // scary, but it just sets back to the default window.open behavior
        var windowOpen = window.open; // Yes it is not deleted !

        // Note it does not take a target!
        var systemOpen = function(url, options) {
            // Do not use window.open becaus the InAppBrowser open will not proxy window.open
            // in the future versions of the plugin (see doc) so it is safer to call InAppBrowser.open directly
            cordova.InAppBrowser.open(url,"_system",options);
        };


        // Handle direct calls like window.open("url","_blank")
        window.open = function(url,target,options) {
            if ( target == "_blank" ) systemOpen(url,options);
            else windowOpen(url,target,options);
        };

        // Handle html links like <a href="url" target="_blank">
        // See https://issues.apache.org/jira/browse/CB-6747
        $(document).on('click', 'a[target=_blank]', function(event) {
            event.preventDefault();
            systemOpen($(this).attr('href'));
        });
    }