Cómo procesar cada URL en WebView

29 Jul, 2023 Programación 0

importar React, { Component } desde ‘react’;
import { StyleSheet, Text, View } desde ‘react-native’;
import { WebView } desde ‘react-native-webview’;

// …
class MyWebComponent extends Component {
render() {
return ;
}
}

Estoy utilizando el código anterior y quiero agregar algunas claves en la URL, así como algunas claves en esto para procesarlo. Como a continuación

https://reactnative.dev/?daj

https://reactnative.dev/?meni

Entonces esto está funcionando bien. Pero para la URL inicial, quiero que cuando haga clic en cualquier enlace, esta URL genere una nueva URL como

https://reactnative.dev/docs/getting-started

así que quiero que agregue algunas claves en esto como se mencionó anteriormente

?daj

Entonces no entiendo cómo puedo hacerlo con la URL para moverse dentro del WebView. Por favor, revise y avíseme. Gracias.

Más detalles:
Estoy cargando google.com al principio y haciendo algunas búsquedas aquí

URL de inicio: google.com
URL actual: google.com/

search=’abc’

Entonces quiero procesar cada URL antes de cargarla agregando algunas claves como se muestra a continuación

google.com?key-base=”abc”
google.com/search=’abc’?key-base=”abc”

new-google.com?key-base=”abc”
new-google.com/search=’abc’?key-base=”abc”

davy.ai

July 29, 2023 at 6:31 pm

Para agregar claves en la URL al navegar dentro del componente WebView, puedes utilizar la propiedad onNavigationStateChange del componente WebView. Esta propiedad toma una función que se llama cada vez que cambia el estado de navegación en el WebView. Luego puedes usar esta función para modificar la URL y agregar tus claves.

Aquí tienes un ejemplo de implementación:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

class MyWebComponent extends Component {
  onNavigationStateChange = (navState) => {
    const { url } = navState;
    // verificar si la URL ha cambiado
    if (this.lastUrl !== url) {
      this.lastUrl = url;
      // agregar tus claves a la URL aquí
      const newUrl = `${url}?key-base=abc`;
      // navegar a la URL modificada
      this.webviewRef.injectJavaScript(`window.location = '${newUrl}'`);
    }
  }

  render() {
    return (
      <webview source="{{" uri:="" 'https://reactnative.dev/'="" }}="" onnavigationstatechange="{this.onNavigationStateChange}" ref="{(ref)" ==""> { this.webviewRef = ref; }}
      />
    );
  }
}

En este ejemplo, la función onNavigationStateChange se llama cada vez que cambia el estado de navegación en el WebView. Verifica si la URL ha cambiado desde el último cambio de estado y, de ser así, agrega el parámetro key-base a la URL y navega a la URL modificada utilizando el método injectJavaScript. El método injectJavaScript te permite ejecutar código JavaScript dentro del WebView, que en este caso navega a la URL modificada.

Nota que en el ejemplo anterior, estamos usando this.webviewRef.injectJavaScript para navegar a la URL modificada. Esto se debe a que los métodos goBack y goForward proporcionados por el componente WebView no funcionan bien con JavaScript inyectado. Si necesitas implementar un botón de retroceso/avance, debes realizar un seguimiento del historial de navegación tú mismo y utilizar los métodos goBack y goForward proporcionados por el WebView.

Answer

davy.ai

July 29, 2023 at 6:31 pm
Para agregar claves en la URL al navegar dentro del componente WebView, puedes utilizar la propiedad onNavigationStateChange del componente WebView. Esta propiedad toma una función que se llama cada vez que cambia el estado de navegación en el WebView. Luego puedes usar esta función para modificar la URL y agregar tus claves.

Aquí tienes un ejemplo de implementación:
```
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

class MyWebComponent extends Component {
  onNavigationStateChange = (navState) => {
    const { url } = navState;
    // verificar si la URL ha cambiado
    if (this.lastUrl !== url) {
      this.lastUrl = url;
      // agregar tus claves a la URL aquí
      const newUrl = `${url}?key-base=abc`;
      // navegar a la URL modificada
      this.webviewRef.injectJavaScript(`window.location = '${newUrl}'`);
    }
  }

  render() {
    return (
      <webview source="{{" uri:="" 'https://reactnative.dev/'="" }}="" onnavigationstatechange="{this.onNavigationStateChange}" ref="{(ref)" ==""> { this.webviewRef = ref; }}
      />
    );
  }
}
```
En este ejemplo, la función onNavigationStateChange se llama cada vez que cambia el estado de navegación en el WebView. Verifica si la URL ha cambiado desde el último cambio de estado y, de ser así, agrega el parámetro key-base a la URL y navega a la URL modificada utilizando el método injectJavaScript. El método injectJavaScript te permite ejecutar código JavaScript dentro del WebView, que en este caso navega a la URL modificada.

Nota que en el ejemplo anterior, estamos usando this.webviewRef.injectJavaScript para navegar a la URL modificada. Esto se debe a que los métodos goBack y goForward proporcionados por el componente WebView no funcionan bien con JavaScript inyectado. Si necesitas implementar un botón de retroceso/avance, debes realizar un seguimiento del historial de navegación tú mismo y utilizar los métodos goBack y goForward proporcionados por el WebView.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo procesar cada URL en WebView

Answer

davy.ai