在 Cordova 中使用带有自定义 URL 方案的 handleOpenURL

Posted 2023-02-19

【中文标题】在 Cordova 中使用带有自定义 URL 方案的 handleOpenURL

【英文标题】：Using handleOpenURL with Custom URL scheme in Cordova

【发布时间】：2016-03-19 08:20:03

【问题描述】：

我正在开发一个应用程序，除了自定义 URL 方案插件 (https://github.com/EddyVerbruggen/Custom-URL-scheme) 之外，几乎所有的东西都已经搞定了。我已成功安装插件并设置了signsrestaurantandbar 的自定义URL 方案。因此，当我使用 signrestaurantandbar:// 时，我的应用程序将打开。我面临的问题是处理 URL。在自述文件中，它说我可以为此使用函数 handleOpenURL(URL)，但我在尝试在应用程序中加载特定页面时仍然遇到问题。

这是我尝试过的：

function handleOpenURL(url) 
      var strValue = url;
      strValue = strValue.replace('signsrestaurantandbar://','');
      window.location.href = strValue + ".html";
  

我把它放在我的 index.html 页面中......虽然它应该在加载 signrestaurantandbar://page 时打开 page.html，但它没有正确执行。在我的 chrome 控制台中，它说它加载了页面，但它显示为空白而没有任何错误，而且这只发生一次。当我第二次尝试加载 signrestaurantandbar://page 时，它​​只会加载应用程序。

如果能提供有关如何使用自定义 URL 方案加载特定页面的任何提示，我将不胜感激。

【参考方案1】：

您需要确保在CSP 中列出您的“自定义”网址。

添加于 2016 年 2 月 11 日：注意：您的应用程序现在不安全。保护您的应用由您决定。

看起来像这样：

<meta http-equiv="Content-Security-Policy" 
         content="default-src * signsrestaurantandbar:; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

通配符设置 (*) 通常可以处理大多数应用程序，但不能处理您的“自定义”协议。注意：通配符设置有可能使您的应用程序脱离“应用商店”。

您可能还需要添加到您的config.xml

<allow-intent href="signsrestaurantandbar:" />

这个白名单工作表应该会有所帮助。 HOW TO apply the Cordova/Phonegap the whitelist system

您还应该阅读whitelist matrix，尤其是<allow-intent (...) /> 部分 - 祝你好运

【讨论】：

handleOpenURL() 没有被调用还有其他原因吗？我已经用<allow-intent> 和 CSP 一起尝试了上述方法，但仍然无法调用该函数。

修复了我的问题。由于某种原因，handleOpenURL() 函数仅在我将它放在 HTML 正文中的 <script> 标记中时才有效。

@johnborges 上述设置将使您的应用程序不安全。此外，您的应用可能会被“应用商店”拒绝。如果您将 javascript 和 CSS 保存在单独的文件中，则不需要使用 CSP；这也将有助于保护您的应用。

@JesseMonroy650 感谢您的提示。自从我之前的帖子以来，我已经离开了这个插件，而是使用了 Universal Links。 github.com/nordnet/cordova-universal-links-plugin

@DileepMettu 这就是了解更多关于 javascript 的帮助的地方。我使用“EventEmitter.js”库来调度一个事件并在 angular.run (angular 1) 函数上监听事件。

【参考方案2】：

使用此代码添加全局 handleOpenURL 函数：

window.handleOpenURL = function(url) 
  console.log(">>>>>>>>>>>>>>>>>>>");
  // do stuff, for example
  // document.getElementById("url").value = url;
  console.log(url);
;

见Cordova Custom URL Scheme Handling。

请注意，如果您在此函数中使用 alert，您的应用会挂起：

您不能在 handleOpenURL 代码中启动任何交互式功能，例如警报，否则，您的应用将挂起。同样，您不应在其中调用任何 Cordova API，除非您首先将其包装在 setTimeout 调用中，并且超时值为零。

此方法的好处是您无需使用Content-Security-Policy 元标记更改内容安全策略。

【讨论】：

我在哪里添加您的代码？我试过document.addEventListener('deviceready',function ()... 但没有用。

@sooon 是的，这就是我在deviceready 事件处理程序中放置它的地方。您如何测试您的handleOpenURL 是否已被调用？我注意到 Chrome 开发人员工具无法为我可靠地记录。

我在index.html 上放了一个<div>urlscheme</div> 并使用jQuery 将文本urlscheme 替换为url，只是为了看看它是否有效。但到目前为止还没有结果。

@PavelChuchuva：2017 年，不工作。您一定错过了使我们感到困惑的说明中的某些内容。请更新。

我在同样的问题上苦苦挣扎——即使做了上述修改，handleOpenURL 函数也不会被调用。自定义 URL 方案将打开我的应用程序，但不会调用该函数。在我将 添加到我的 index.html 文件的 之后，它就可以工作了！