我正在我的应用程序中显示一个URL,我想检查页面是否包含给定单词,让我们说URL为
如果我的应用程序中有任何链接包含facebook,那么我该如何对我说:隐藏或删除整个html元素。
这就是我显示链接的方式:
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
答案 0 :(得分:0)
实际上,您不需要访问WebView中的元素。您可以直接隐藏/显示WebView组件。将链接定义为字符串:
const myLink = 'https://github.com/facebook/react-native';
然后,您可以检查其是否包含单词facebook。如果包含它,则可以这样显示或隐藏它;
{ myLink.indexOf('facebook') > -1 ?
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/> : null
}
您还可以将JavaScript规则注入WebView。为此,您在组件上需要以下道具:
<WebView
javaScriptEnabled
injectedJavaScript={'function injectRules() {' + myRule + '};injectRules();'}
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
这基本上定义了一个JavaScript函数并调用它。然后,您需要在react-native端将功能实现为字符串。以下只是一个更改颜色的示例,您可以实现自己的JS函数来隐藏元素:
const myRule = 'document.querySelector("div>p").style.color ="black";';
您可以将其进一步包装为if条件:
const myRule = myLink.indexOf('facebook') > -1 ? 'document.querySelector("div>p").style.color ="black";' : 'return;';