Блог

Главная - Вопросы по программированию - Обнаружение щелчков в собственном веб-представлении React

Обнаружение щелчков в собственном веб-представлении React

#javascript #react-native #webview #click

Вопрос:

кто-нибудь работал с функцией обнаружения кликов в веб-режиме? Есть веб-представление, загружающее сайт, на котором мне нужно определить, нажал ли пользователь на кнопку. Я попытался использовать введенный javascript, но не смог достичь желаемого результата. Вот мой код

 <WebView scalesPageToFit
    startInLoadingState
    originWhitelist={['*']}
    style={{ flex: 1 }} source={{ uri: url  }}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    setSupportMultipleWindows={false}
    />

Как мы добавим поддержку для события click ? Нужно ли нам менять серверную часть или мы можем справиться с внешним интерфейсом ?

Ответ №1:

Я решил проблему с помощью приведенного ниже кода. Это работает для меня и обнаруживает щелчок внутри html :

 import { WebView } from 'react-native-webview';

export default function App() {

const html = `
 <html>
   <body style='color:red'>
     This is a test
     <input type="button" value="Click me" onclick="msg()">
     <script>
         function msg() {
           setTimeout(function () {
             window.ReactNativeWebView.postMessage("Hello!")
           }, 2000)
         }
       </script>
   </body>
 </html>
 `;

return (
 <View style={styles.container}>
   <StatusBar style="auto" />
   <WebView
       source={{ html }}
       style={{width:400,height:200,backgroundColor:'white',marginTop:20}}
       onMessage={event => {
         alert(event.nativeEvent.data);
       }}
     />
 </View>
);
}
Метки: