【问题标题】:React Native WebView - Open link in external browser only in case of user interactionReact Native WebView - 仅在用户交互的情况下在外部浏览器中打开链接
【发布时间】:2020-04-09 08:04:27
【问题描述】:

我有以下 WebView 组件,它多次用于新闻文章中的各种嵌入

<WebView
    useWebKit={true}
    ref={(ref) => this.webview = ref}
    javaScriptEnabled={true}
    injectedJavaScript={"(" + injectedScript + ")()"}
    onMessage={this.onMessage}
    onNavigationStateChange={this.onNavigationStateChange}
    {...this.props}
/>

以及以下导航状态变化监听器,用于在外部浏览器中打开链接

onNavigationStateChange = (event) => {
    this.webview.stopLoading();
    Linking.openURL(event.url);
}

问题在于导航更改侦听器似乎无法区分用户交互和自动页面重定向(社交媒体嵌入通常会这样做)。如何在外部浏览器中打开链接,仅用于用户交互?

【问题讨论】:

    标签: react-native webview


    【解决方案1】:

    我不知道自动页面重定向是否会触发点击事件,但应该不会,所以你只能监听 click 事件,我想这只能由用户触发。

    onNavigationStateChange = (navState) =>
    {
        if (navState.navigationType === 'click') {
            // User clicked something
        }
    }
    

    【讨论】:

    • 感谢您的回答!我认为类似的东西应该是可能的,但不知何故我的navState 对象不包含navigationType 属性,只有这样的东西:{ canGoForward: false, canGoBack: true, loading: true, title: 'about:blank', url: 'about:blank', target: 5 }
    • 显然这是 Android 的一个较旧的错误,应该在不久前修复。我正在使用最新版本的react-nativeWebView
    • 嗯,这是一个 Android 问题,但应该可以在 iOS 上运行...也许,检查 url 对你有用吗?喜欢if (navState.url !== 'about:blank') { ... }
    • 已经试过了!但是那些讨厌的社交媒体嵌入重定向大约 100 次,而且每次的 url 都不一样。没有其他编程方式可以知道哪个是用户交互。但是您的回答为我指明了另一个好的方向。显然,Android 中缺少navigationType 是一个需要修复的错误。我将在 GitHub 上发布错误报告,非常感谢!
    • 是的,您的解决方案是正确的,这只是 Android 上的一个错误,希望我能让他们再次查看它。
    猜你喜欢
    • 2014-07-12
    • 2018-02-11
    • 2017-08-06
    • 1970-01-01
    • 2015-12-09
    • 1970-01-01
    • 2012-09-24
    • 2018-07-06
    • 2016-06-02
    相关资源
    最近更新 更多