代码之家 › 专栏 › 技术社区 › Ska

如何在WebView中检测被点击的单词?

react-native

Ska · 技术社区 · 6 年前

我有一个简单的网络视图,想知道其中哪个词被点击了。例如,如果用户点击图片上文章中的任何一个词,比如“气球”,我想捕捉它。

下面是代码和渲染。

export default class App extends React.Component {
  render() {
    return (
      <View style={{top:100, height: 500, backgroundColor:'red' }}>
        <WebView
          source={{uri: 'https://www.reuters.com/article/us-art-banksy/we-just-got-banksy-ed-balloon-girl-painting-self-destructs-at-sale-idUSKCN1MG0B4?feedType=RSS&feedName=artsNews'}}
          style={{height:"200", marginTop: 20}}
        />
      </View>

    );
  }
}

更新: 这就是我让WebView基于@pritesh answer反馈JS事件的方式。

<WebView
          source={{uri: 'https://www.reuters.com/article/us-art-banksy/we-just-got-banksy-ed-balloon-girl-painting-self-destructs-at-sale-idUSKCN1MG0B4?feedType=RSS&feedName=artsNews'}}
          style={{height:"200", marginTop: 20}}
          javaScriptEnabled={true}
          injectedJavaScript={`document.body.addEventListener('click', 
        function(e){
          window.postMessage("Message from WebView","*");
          console.log(e);
        })`}
          onMessage={e => console.log("message", e)}
        />

1 回复 | 直到 6 年前

pritesh 6 年前

在我看来,你可以尝试的一种方法是使用 injectJavascript 或 injectedJavascript WebView的道具。因此,你可以在身体上注册某种类型的监听器,并使用它来检测被按下的内容,比如:

<WebView
    ref={c => this._webview = c}
    javaScriptEnabled={true}
    injectedJavaScript={`document.body.addEventListener('click', function(e){
        console.log(e)
    })`}
/>

但是你需要研究如何通过Webview的回调来做出反应。

推荐文章