如何在React Native WebView中限制仅访问博客板块并禁用其他链接

核心思路 #

要限制WebView仅跳转至网站博客板块，需通过拦截跳转请求+白名单校验实现：

• 缩小originWhitelist范围，仅允许目标域名
• 使用onShouldStartLoadWithRequest拦截所有跳转请求，校验URL是否属于博客板块路径，不符合则阻止加载

修改后的完整代码 #

import { SafeAreaView, View, Alert } from 'react-native';
import { WebView } from 'react-native-webview';

const BlogScreen = () => {
  const runFirst = `
    document.querySelector(".mobile-bottom-nav-menu").style.display = "none";
    document.querySelector(".header, .js-sticky-header, .fixed-top").style.display = "none";
    true;
  `;

  // 校验URL是否属于博客板块，根据实际博客路径调整规则
  const isBlogPath = (url) => {
    // 示例：仅允许包含/blog/的路径，可根据实际博客URL结构修改
    return url.includes('https://www.****.com/blog/');
  };

  const handleLoadRequest = (request) => {
    const { url } = request;
    // 允许初始首页（若首页为博客入口）或符合规则的博客路径
    if (url === 'https://www.****.com' || isBlogPath(url)) {
      return true;
    }
    // 拦截非博客路径跳转，可添加提示或其他处理
    Alert.alert('提示', '仅允许访问博客板块');
    return false;
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <WebView
          // 仅允许目标域名，禁止外部网站跳转
          originWhitelist={['https://www.****.com']}
          source={{
            uri: 'https://www.****.com',
          }}
          onMessage={(event) => {}}
          injectedJavaScript={runFirst}
          // 拦截跳转请求，决定是否允许加载
          onShouldStartLoadWithRequest={handleLoadRequest}
          // 确保WebView占满屏幕
          style={{ flex: 1 }}
        />
      </View>
    </SafeAreaView>
  );
};

export default BlogScreen;

关键说明 #

• originWhitelist：从['*']改为仅目标域名，直接禁止跳转到其他外部网站
• onShouldStartLoadWithRequest：核心拦截逻辑，每次WebView发起加载请求时触发：
  • 自定义isBlogPath函数，根据博客板块实际URL结构调整校验规则（比如路径以/blog开头、包含特定路由参数等）
  • 若请求URL不符合规则，返回false阻止加载，同时用Alert提示用户
• 布局优化：给SafeAreaView和View添加flex:1，确保WebView占满整个屏幕，避免布局塌陷

注意事项 #

• 若博客板块是独立子域名（如blog.****.com），需修改isBlogPath的校验逻辑
• 若需允许博客内的静态资源（图片、样式文件等）加载，可在isBlogPath中补充对应规则

内容的提问来源于stack exchange，提问作者Shadow Moon