React Native 修改使用webview加载的网页内的数据

x759pob2 于 2023-03-13 发布在 React

关注(0)|答案(1)|浏览(101)

我有这个网页

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Submit Form</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){

let amount = 300;

    $("#submitBtn").click(function(){   
alert(amount)   
        $.post("https://example.com/posted.php",
              {
                price: amount,
                city: "Duckburg"
              },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
    });
});
</script>
</head>
<body>
    <form action="#" method="post" id="myForm">
        <label>First Name:</label>
        <input type="text" name="first-name">
        <button type="button" id="submitBtn">Submit Form</button>
    </form>
</body>
</html>

我已经用webview加载了

import { StyleSheet, Text, View, Button } from 'react-native';
import React, { useRef, useState } from 'react';
import { useNavigation } from '@react-navigation/native'
import { WebView } from 'react-native-webview';

const Home = () => {

const navigation = useNavigation()

  const webViewRef = useRef(null);
  const [webviewLoaded, setWebviewLoaded] = useState(false);

  const modifyFooVariable = () => {
    const jsCode = "window.amount = '6855555';";
    webViewRef.current.injectJavaScript(jsCode);
  };
  
 
return (

 <WebView
      ref={webViewRef}
      source={{ uri: 'https://example.com/test.html' }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      onLoad={() => setWebviewLoaded(true)}
      onMessage={(event) => {
        if (event.nativeEvent.data === 'modifyFooVariable') {
          modifyFooVariable();
        }
      }}
      injectedJavaScript={`
        document.addEventListener('DOMContentLoaded', function() {
          window.ReactNativeWebView.postMessage('webviewLoaded');
        });
      `}
    />
)

}

export default Home

const styles = StyleSheet.create({
    WebViewStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 0.5,
    marginTop: 30,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  ct:{
      color:'red',
  }
});

是否可以在我正在加载的远程文件中更改此变量

let amount = 300;

从我的react本地网络视图？

react-native

来源：https://stackoverflow.com/questions/75683325/modifying-data-that-is-inside-a-web-page-loaded-using-webview

1条答案

按热度按时间

o2g1uqev1#

在我的react原生代码中，我添加了

import { StyleSheet, Text, View, Button } from 'react-native';
import React, { useRef, useState } from 'react';
import { useNavigation } from '@react-navigation/native'
import { WebView } from 'react-native-webview';

const Home = () => {

const navigation = useNavigation()

  const webViewRef = useRef(null);

const modifyFooVariable = () => {
    const jsCode = `
      document.getElementById('foo').innerHTML = 'newer value';
    `;
    webViewRef.current.injectJavaScript(jsCode);
  };
  
 
return (

 <WebView
      ref={webViewRef}
      source={{ uri: 'https://example.com/test.html' }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      onLoad={() => modifyFooVariable()}
    />
)

}

export default Home

const styles = StyleSheet.create({
    WebViewStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 0.5,
    marginTop: 30,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  ct:{
      color:'red',
  }
});

在我的html代码中

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test Webpage</title>
    <script>
      function modifyFooVariable() {
        window.foo = 'new value';
      }

      document.addEventListener('message', function(event) {
        if (event.data === 'webviewLoaded') {
          modifyFooVariable();
        }
      });
    </script>
  </head>
  <body>
    <h1>Test Webpage</h1>
    <p>Foo variable value: <span id="foo">original value</span></p>
  </body>
</html>

我能让它工作。

赞(0）回复(0）举报 2023-03-13

我来回答

React Native 修改使用webview加载的网页内的数据

1条答案

相关问题

热门标签

最新问答