React Native WebView 如何为加载的谷歌课堂添加链接打开限制

根因说明 #

当前代码绑定的onNavigationStateChange是导航完成后触发的回调，无法阻断即将发起的页面跳转，要实现链接拦截必须使用WebView提供的前置导航拦截钩子onShouldStartLoadWithRequest。 #

具体实现步骤 #

• 定义谷歌课堂正常运行所需的合法域名白名单，避免过度拦截导致登录、文档加载等核心功能失效，参考范围：
  • classroom.google.com 谷歌课堂主站
  • accounts.google.com 谷歌账号登录、授权流程
  • docs.google.com 课堂内嵌的作业、文档资源
  • drive.google.com 课堂关联的云盘附件
  • googleusercontent.com 谷歌静态资源CDN
• 在onShouldStartLoadWithRequest回调中做匹配判断：提取待跳转链接的主机名，匹配白名单范围，不在白名单内的跳转直接返回false，阻断加载行为
• 可在拦截逻辑中增加轻量提示，避免用户点击外链无响应的糟糕体验

修改后的完整可运行代码 #

// 定义合法域名白名单
const ALLOWED_DOMAINS = [
  'classroom.google.com',
  'accounts.google.com',
  'docs.google.com',
  'drive.google.com',
  'googleusercontent.com'
]

// 前置导航拦截逻辑
handleShouldStartLoad = (request) => {
  try {
    const targetUrl = new URL(request.url)
    // 兼容匹配子域名
    const isAllowed = ALLOWED_DOMAINS.some(domain => 
      targetUrl.hostname === domain || targetUrl.hostname.endsWith(`.${domain}`)
    )
    if (!isAllowed) {
      // 可在此处添加Toast提示：当前仅支持访问谷歌课堂相关内容
      return false
    }
    return true
  } catch (e) {
    // 兼容异常格式链接
    return false
  }
}

render() {
    return (
      <View style={styles.container}>
        <WebView
          style={styles.webview}
          setSupportMultipleWindows={false}
          ref={this.WEBVIEW_REF}
          javaScriptEnabled={true}
          allowsFullscreenVideo={true}
          // 绑定前置拦截钩子，替换原无效的拦截逻辑
          onShouldStartLoadWithRequest={this.handleShouldStartLoad}
          onNavigationStateChange={this.onNavigationStateChange}
          source={{
            uri: "https://classroom.google.com",
          }}
          // 修正原代码类型错误，关闭本地文件访问权限
          allowFileAccess={false}
          startInLoadingState={true}
          renderLoading={() => (
            <View style={[styles.containerWebView]}>
              <ActivityIndicator size="large" color="#00ff00" />
              <Text style={styles.loadingText}>
                Estamos configurando sua internet patrocinada. Isso pode demorar
                um pouco.
              </Text>
            </View>
          )}
        />
      </View>
    );
  }
}

关键注意点 #

• 必须保持setSupportMultipleWindows={false}的配置，否则部分外链会通过新开窗口的方式绕过当前拦截逻辑
• 测试过程中如果出现资源加载失败、功能异常，可打开WebView调试模式查看请求的域名，将必要的域名补充进白名单即可，不要一开始就把白名单设得过严
• 原代码中allowFileAccess赋值为{}属于类型错误，该属性只接受布尔值，传对象完全无法生效

内容的提问来源于stack exchange，提问作者Andre Loureiro