引言
对于我们前端开发者来说，移动端开发是我们重要的任务之一。而 cordova 是一个方便开发者快速开发移动端应用的工具，我们可以通过它来打包我们的 web 应用程序。然而，与浏览器不同的是，移动端应用包含的 webview 是不支持 window.open 和 a 标签的 href 等操作打开系统浏览器的。这就导致了在开发一些需要外部网页的跳转的H5页面时，原本运行良好的h5页面在移动端webview中打开的时候会无法打开外部链接，用户体验不佳。为了解决这个问题，我们引入 cordova-plugin-hijack-webview-link-click 包。利用这个包，我们可以通过监听链接点击的方式自定义处理链接打开的行为，让它在应用内部打开。
安装
安装 cordova-plugin-hijack-webview-link-click 包，可以通过 npm 命令：
npm install cordova-plugin-hijack-webview-link-click
使用
Step 1
在你的 Cordova 项目中添加 cordova-plugin-hijack-webview-link-click 插件:
cordova plugin add cordova-plugin-hijack-webview-link-click
Step 2
在 deviceready 回调中执行 HijackWebviewLinkClick.init() 以启用插件。
document.addEventListener('deviceready', function() { HijackWebviewLinkClick.init(); console.log("cordova-plugin-hijack-webview-link-click ready..."); }, false);
Step 3
在 HijackWebviewLinkClick.init() 之后，所有新打开的窗口都将被重定向到应用的 WebView 。但是，如果你想自己处理某些链接，你需要使用 HijackWebviewLinkClick.open(url) 手动打开这些链接。例如，下面的代码演示了如何处理所有以 example.com 开头的链接。
document.addEventListener('click', function(e) { e.preventDefault(); if (e.target.href.indexOf('example.com') === 0) { HijackWebviewLinkClick.open(e.target.href); } else { window.open(e.target.href, '_blank'); } });
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------------------------------- ------------ ----- ---------------- ----- --------------- ---------------------------- ----------------- ------- -------------------------- -------- ---------------------------------------- ---------- - ------------------------------ ----------------------------------------------------- ----------- -- ------- ---------------------------------- ----------- - ------------------- -- ------------------------------------- --- -- - ------------------------------------------- - ---- - -------------------------- ---------- - --- --------- ------- ------ -------------------------------------------- --------- --------- ---------------------------------------- ---------- ------------------------ ----------------------------------- ----- ------------------------------------------ ---------- ----- -------------------------------------- ---------- ------- -------展开代码
结语
通过本文的介绍，我们学习到了利用 cordova-plugin-hijack-webview-link-click 包来解决在移动端 webview 中无法打开外部链接的问题。只要记住相应的用法，我们就能够帮助自己开发高质量的移动应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005653681e8991b448e1aa3
