react-native-webview：区分脚本引起的window.location和用户点击链接

Posted 2023-02-22

【中文标题】react-native-webview：区分脚本引起的window.location和用户点击链接

【英文标题】：react-native-webview: distinguish between window.location caused by script and user clicking the link

【发布时间】：2020-09-14 08:54:16

【问题描述】：

react-native-webview 中有没有办法区分用户引起的导航和脚本引起的导航？

我看到onLoad[Start,End] 和onNavigationStateChange 事件在这两种情况下都会被触发。此外，如果我将日志记录添加到WebViewClient.shouldOverrideUrlLoading() 或WebViewClient.shouldInterceptRequest()，如果在脚本中更改了window.location，或者如果用户单击链接，则会调用两个 fns。那么如何区分这两者呢？

谢谢！

编辑：必须澄清，我无法控制加载哪些脚本以及它们在页面上执行的操作。

【参考方案1】：

您可以在网站端用户引起的每个 window.location 中传递查询参数isUserCause=true，并且您可以检测到 isUserCause 参数的 onNavigationStateChange

你可以这样传递网址

http://www.example.com/index.php?isUserCause=true

在 onNavigationStateChange 中，您可以通过 QS pacakge 解析查询参数

import qs from 'qs';

getQueryParams = (url) => 
    var regex = /\?.+/g;
    const result = url.match(regex);
    if (result && result.length>0) 
      const parsed = qs.parse(result[0], ignoreQueryPrefix: true);
      return parsed;
     else 
      return ;
    
  ;


onNavigationStateChange = (navState) => 
    const queryParams=this.getQueryParams(navState.url);
    if(queryParams.isUserCause)
    
      console.log("user-caused");
    
    else
    
      console.log("script-caused");
    
  ;

【讨论】：

感谢您的回复！对不起，我的问题没有明确。为了清楚起见，对其进行了编辑。我无法控制页面上运行的脚本，因此无法添加任何参数。

@siphiuel 你能给出我想分析的 webview url