如何在浏览器而不是应用程序中强制打开外部链接?

Question

我的移动网站提供外部链接，如YouTube。 根据浏览器的不同，它会在 Web 浏览器或相应的应用程序上打开。

但是我想在当前浏览器中强制打开链接，而不是在应用程序中。

示例 - 当我打开"https://m.youtube.com"之类的链接时，Chrome 移动浏览器总是打开已安装的 Youtube 应用程序;

• 我现在正在使用 React。

Answer 1

这个流行的 2011 年 GitHub Gist(在底部附近的注释中添加了 2018 年的更新代码(适用于加载到 WebView 中的 HTML 文档，但似乎是您所追求的：https://gist.github.com/kylebarrow/1042026

使用的技术是拦截超链接单击，取消默认导航(这将导致出现"在YouTube中打开？"提示(，然后通过设置window.document.location.assign进行导航(这与window.location不同(。我不是移动 Safari 专家，但我怀疑如果设置了document.location而不是window.location，移动 Safari 不会提示在应用程序中打开(。

将此代码放在文档的 DOM 加载后运行的脚本函数中(即DOMContentLoaded或在呈现的 HTML 末尾的内联脚本中。

const isMobileSafari = ( ( ua ) => ua.match(/iPad/) || ua.match(/iPhone/) )( window.navigator.userAgent );
if( isMobileSafari ) {
const hyperlinks = document.querySelectorAll( 'a:link' );
for( let anchor of hyperlinks ) anchor.addEventListener( 'click', onHyperlinkClickPreventAppOpen );
}
function onHyperlinkClickPreventAppOpen( ev ) {
const el = ev.target;
if( el.href && ( el.href.startsWith( "http:" ) || ( el.href.startsWith( "https:" ) ) {
ev.preventDefault();
window.document.location.assign( el.href );
}
}

如果要拦截加载文档后添加的超链接中的单击，请执行以下操作：

document.addEventListener( 'click', onDynamicHyperlinkClickPreventAppOpen );
function onDynamicHyperlinkClickPreventAppOpen ( ev ) {
const el = ev.target;
el = el.closest( 'a:link' ); // In case the 'click' event was raised by a descendant of an <a>
if( !el ) return;
const fakeEvent = { target: el, preventDefault: ev.preventDefault };
onHyperlinkClickPreventAppOpen( fakeEvent );
}