Question

我不清楚如何实施<footer> <div class="mastfoot"> <div class="foot_class"> <a href="--"><p>Facebook</p></a> <a href="--"><p>Email</p></a> <a href="--"><p>Linkedin</p></a> <a href="--"><p>Github</p></a> <a href="--"><p></p></a> </div> </div> </footer>和html, body { -webkit-perspective: 1000px; background: #457fca; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #5691c8, #457fca); /* Chrome 10-25, Safari 5.1-6 */ background-image: url('bg.jpg'); background-size: cover; padding: 0; height: 100%; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); } .mastfoot { color: #999; /* IE8 proofing */ color: rgba(255, 255, 255, .5); } footer { position: fixed; margin-top: -150px; /* negative value of footer height */ height: 150px; clear: both; } .foot_class { margin-top: 125px; } .foot_class a { color: #fff; border: 1px solid white; background: #2F3336; border-radius: 4px; text-align: center; text-decoration: none; font-family: fontawesome; position: relative; display: inline-block; width: 40px; height: 40px; padding-top: 12px; margin: 0 2px; transition: all .5s; } .foot_class a:hover { background: #00b9b7; } .foot_class a:hover p { border-radius: 30px; bottom: 35px; visibility: visible; } .foot_class a p { color: #666; position: absolute; bottom: 0; left: -25px; right: -25px; padding: 5px 7px; z-index: -1; font-size: 14px; border-radius: 2px; background: #fff; visibility: hidden; transition: all 0.5s cubic-bezier(0.6, -0.6, 0.2, 1.5); } .foot_class a p:before { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; bottom: -5px; left: 40px; }，我是否可以获得整个网页，但只能从原生方面做出反应。

我的意思是，我将使用onMessage

注入此代码

postMessage

我将使用injectedJavaScript收到结果。到目前为止我无法做到这一点

Answer 1

是的，您可以执行此操作所有您需要做的就是使用window.postMessage("message")中要加载的网页中的WebView，您可以在onMessage道具中看到该消息

示例：

class Test extends React.Component{ constructor(props){ super(props); this.state:{ html:'' } } componentWillMount(){ this.setState({ html : `<html> <head> <script> window.postMessage("Messga from webView") </script> </head> <body><h1>Hello from webView</h1></body> </html>` }) } render(){ return ( <View style={{flex: 1}}> <WebView ref={(reff) => { this.webView = reff; }} source={{html: this.state.html}} style={[styles.flex1, styles.padding5]} onMessage={(event)=>{ let message = event.nativeEvent.data; /* event.nativeEvent.data must be string, i.e. window.postMessage should send only string. * */ }} onNavigationStateChange={(evt)=>{}} onError={(e) => { console.warn('error occured', e) }}/> </View> ) } }

我刚刚添加了一个示例html并在WebView中进行了渲染，您可以在要加载到WebView的页面中执行相同操作。

或另一种解决方案是：

您可以使用here所述的injectedJavaScript或injectJavaScript WebView道具。

Answer 2

postMessage已过时::现在必须使用window.ReactNativeWebView.postMessage(data)

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

对于组件的完整想象将是：

export const WebViewComponent = (props) => {
  const webViewScript = `
    setTimeout(function() { 
      window.ReactNativeWebView.postMessage(/*your pushed data back to onMessage 'event.nativeEvent.data'*/); 
    }, 2500);
    true; // note: this is required, or you'll sometimes get silent failures
  `;

  return (
    <WebView
      source={{
        uri: `https://example.com`,
      }}
      automaticallyAdjustContentInsets={false}
      scrollEnabled={false}
      onMessage={(event) => {
        // do something with `event.nativeEvent.data`
      }}
      javaScriptEnabled={true}
      injectedJavaScript={webViewScript}
      domStorageEnabled={true}
      style={{ width: "100%", height: /*webViewHeight*/ }}
    />
  );
};

Answer 3

实际上我一直在看文档，因为我使用了react native的webview的injectJavascript函数。在https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage中，它表示对于扩展名，我们需要使用“ *”作为属性。因此就不会像这样的“ window.postMessage（“来自WebView的Messga”）“

相反，它必须是window.postMessage（“来自WebView的Messga”，“ *”）才能起作用。

React Native WebView onMessage和postMessage获取所有网页

3 个答案: