正文 

当前位置： 首页 > 源码 >

如何在 WebView [React-Native] 中禁用用户文本选择

     2023-03-06     124

关键词：

【中文标题】如何在 WebView [React-Native] 中禁用用户文本选择【英文标题】：How to disable user text selection in WebView [React-Native] 【发布时间】：2017-04-12 19:30:33 【问题描述】：

我试图弄清楚如何在我的 ios 应用程序的 React-Native WebView 中禁用文本选择。在网站上使用 CSS 样式 user-select 设置为 none 似乎在使用设备或模拟器时不起作用，但它在浏览器中确实起作用。有没有办法使用 React-Native WebView 禁用此功能，或者我是否需要使用一些本机代码来实现此功能？

使用 React-Native 0.30，iOS 9-10

【问题讨论】：

【参考方案1】：

我能够在 React Native 端禁用缩放、文本选择和其他指针事件，方法是将 WebView 包装在 View 中并设置一些道具：

<View pointerEvents="none">
  <WebView
    source= uri: webviewUrl 
    scrollEnabled=false
  />
</View>

【讨论】：

添加后，它将禁用所有 webview 触摸。有没有办法只禁用长按以避免复制选择粘贴选项？【参考方案2】：

假设你在 react native 中访问 webview 上的特定 url，那么在 url 中，你可以使用以下技巧：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<div style="font-size:80%;padding-left:10px;padding-right:10px;">


<!DOCTYPE html>
<html>
<head>
  <script>
    function absorbEvent_(event) 
      var e = event || window.event;
      e.preventDefault && e.preventDefault();
      e.stopPropagation && e.stopPropagation();
      e.cancelBubble = true;
      e.returnValue = false;
      return false;
    

    function preventLongPressMenu(node) 
      node.ontouchstart = absorbEvent_;
      node.ontouchmove = absorbEvent_;
      node.ontouchend = absorbEvent_;
      node.ontouchcancel = absorbEvent_;
    

    function init() 
      preventLongPressMenu(document.getElementByTagName('body img'));
    
  </script>
  <style>
    *:not(input):not(textarea) 
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
        -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */

    
  </style>
</head>

<body onload="init()"  >


TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>

</body>

以上将禁用文本选择，但它允许其他功能，例如“单击”。 （它适用于 iOS 和 android 设备）

享受...

【讨论】：

【参考方案3】：

documentation 没有提到这一点，所以我会使用本机实现，这比看起来更容易。您只需在包含所需选项的本机模块中重新实现 this files（可能还有其他一些），请参阅 this answer 和 this one。

也许这个包也可以帮助你实现你的模块：https://github.com/lucasferreira/react-native-webview-android

【讨论】：

【参考方案4】：

我找到了解决方案。请尝试。

* 
  -webkit-user-select: none;
  -webkit-touch-callout: none;

【讨论】：

你能解释一下它的作用吗？

如何在 react-native 中为 webView 请求设置自定义标头

】如何在react-native中为webView请求设置自定义标头【英文标题】：HowtosetacustomheaderforwebViewrequestsinreact-native【发布时间】：2016-08-1514:18:07【问题描述】：我希望能够在我的ruby​​onrails服务器端检测到http请求来自我应用程序中的web... 查看详情

如何在没有 webview 的情况下将 vimeo 播放器嵌入 react-native？

】如何在没有webview的情况下将vimeo播放器嵌入react-native？【英文标题】：Howtoembedvimeoplayerinreact-nativewithoutwebview?【发布时间】：2019-07-2702:52:09【问题描述】：我的react-native应用需要一个vimeo播放器，但它不能是WebView。有一些应用... 查看详情

如何在 Detox 中控制 React-Native webview？

】如何在Detox中控制React-Nativewebview？【英文标题】：HowcanIcontroleReact-NativewebviewinDetox?【发布时间】：2019-01-1716:26:38【问题描述】：我在https://github.com/wix/detox找不到控制React-NativeWebview的方法。还有一个问题，你知道如何在React-Navi... 查看详情

如何在 React-Native Webview 的注入 JavaScript 道具中使用 RegExp？

】如何在React-NativeWebview的注入JavaScript道具中使用RegExp？【英文标题】：HowtouseRegExpinReact-NativeWebview\'sinjectedJavaScriptprop?【发布时间】：2020-03-2905:12:08【问题描述】：当我在React-Native-Webview的注入JavaScript属性中使用regexp时，会抛出... 查看详情

如何在 react-native webView 和 React web-app 之间进行通信？

】如何在react-nativewebView和Reactweb-app之间进行通信？【英文标题】：howtoCommunicatebetweenreact-nativewebViewandaReactweb-app?【发布时间】：2020-10-0713:57:58【问题描述】：我正在尝试在react-native中的webView和使用React-360（当然还有React）创建的... 查看详情

React Native：如何使用 expo 在 webview 中制作全屏 youtube 嵌入视频（没有 react-native 链接）

...ive：如何使用expo在webview中制作全屏youtube嵌入视频（没有react-native链接）【英文标题】：ReactNative:Howtomakefullscreenyoutubeembedvideoinwebviewwithexpo(withoutreact-nativelink)【发布时间】：2019-12-2101:20:03【问题描述】：有谁知道如何让嵌入的you... 查看详情

脚本在 WebView 中不适用于 react-native

】脚本在WebView中不适用于react-native【英文标题】：Scriptdoesn\'tworkinWebViewforreact-native【发布时间】：2021-09-2611:20:05【问题描述】：我尝试通过WebView在我的移动应用中添加helpcrunch聊天。为此，我需要在HTML中添加一些脚本：<scriptt... 查看详情

当设备在 react-native 中离线时，在 webview 中显示本地图像

】当设备在react-native中离线时，在webview中显示本地图像【英文标题】：Showlocalimageinsidehtmlinwebviewwhenthedeviceisofflineinreact-native【发布时间】：2021-02-1015:19:38【问题描述】：我的文章由页面上的不同图像组成，这些图像也本地存储... 查看详情

React-Native，在 Webview 中渲染 H5 Canvas 和 EaselJS 形状

】React-Native，在Webview中渲染H5Canvas和EaselJS形状【英文标题】：React-Native,RenderH5CanvasandEaselJSshapesinWebview【发布时间】：2017-11-0823:31:06【问题描述】：我创建了一个可以使用Canvas和EaselJS绘制的HTML页面，我可以在Web应用程序中使用... 查看详情

React-native android WebView句柄在加载前点击了Url

】React-nativeandroidWebView句柄在加载前点击了Url【英文标题】：React-nativeandroidWebViewhandleclickedUrlbeforeloading【发布时间】：2016-12-2406:44:13【问题描述】：我正在通过react-native中的WebView显示网站。在本网站上有一个指向PassWallet(.pkpass)... 查看详情

WebView 不一致地显示白屏 react-native

】WebView不一致地显示白屏react-native【英文标题】：WebViewinconsistentlyshowingwhitescreenreact-native【发布时间】：2020-11-0714:45:30【问题描述】：我正在使用WebView在我的react-native应用程序中显示twitch-stream的iframe，但是在某些时候它呈现Web... 查看详情

如何使用反应原生 WebView 在模式中显示网页？

...的是空白模态。<WebViewsource=uri:\'https://github.com/facebook/react-native\'/>【问题讨 查看详情

如何在 JS/React-Native 中下载完整的 html 页面？

】如何在JS/React-Native中下载完整的html页面？【英文标题】：HowtodownloadthecompletehtmlpageinJS/React-Native?【发布时间】：2020-10-3123:08:50【问题描述】：所以我试图在React-Native应用程序中下载一个完整的HTML页面，以便用户稍后也可以在... 查看详情

如何将 oAuth 会话令牌从 salesforce react native 应用程序传递给 react-native webview？

】如何将oAuth会话令牌从salesforcereactnative应用程序传递给react-nativewebview？【英文标题】：HowtopassoAuthsessiontokentoreact-nativewebviewfromsalesforcereactnativeapp?【发布时间】：2019-05-2309:07:30【问题描述】：我们正计划开发一个自定义的react-na... 查看详情

react-native：解决使用webview后部分场景在安卓10崩溃闪退问题(代码片段)

app闪退问题原因：安卓7以上版本（7和7以下版本不会出现闪退）：在屏幕不可视区域加载webView或者webView不在可视区域内切换页面时app崩溃闪退（在屏幕可视区域加载webView或者webView在可视区域内切换页面不会... 查看详情

react-native页面使用webview布满整个页面，导航栏不显示问题

在使用ReactNative开发中，在某个页面用到了WebView组件，但是在部分Android机型（我这里是小米8）自己写的导航栏不显示问题：通过测试发现，导航栏是存在的，如果webview可以滑动，在webview上下滑动时，导航栏是可以显示出来的... 查看详情

react-native页面使用webview布满整个页面，导航栏不显示问题

在使用ReactNative开发中，在某个页面用到了WebView组件，但是在部分Android机型（我这里是小米8）自己写的导航栏不显示问题：通过测试发现，导航栏是存在的，如果webview可以滑动，在webview上下滑动时，导航栏是可以显示出来的... 查看详情

如何将参数从 React-Native 发送到 Native

】如何将参数从React-Native发送到Native【英文标题】：HowtosendparameterfromReact-NativetoNative【发布时间】：2016-05-3111:49:30【问题描述】：WebView.js//WebView.jsvarPropTypes=require(\'ReactPropTypes\')varReact=require(\'React\')importrequireNativeCom 查看详情