dozoisch / dozoisch/react-async-script

Wrong window context when using an iFrame

Abierto
#24 1 comentario 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
177
Forks
29
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

Hi !
I am using the [react-google-recaptcha](https://github.com/dozoisch/react-google-recaptcha) lib as well as [react-frame-component](https://github.com/ryanseddon/react-frame-component) in my project in order to create a widget, and I found out that `react-google-recaptcha` is not usable inside the `iframe` created by `react-frame-component`.
After a bit of investigation and discussion ([see here](https://github.com/dozoisch/react-google-recaptcha/issues/65)) it seems that the issue comes from `react-async-script`, which does not enable us to choose the context (window / document) to use in order to load the script.

Here is a lighter version of my code, to get the idea of how do I use the different libs I mentioned :

```js
import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
import WidgetFrame from 'react-frame-component';
import { ConnectedRouter } from 'react-router-redux';
import { Route } from 'react-router';
import { Provider } from 'react-redux';

const store = createStore(...);

const SetupView extends React.Component {
constructor (props) {
super(props);
this.handleReCaptchaChanged = () => {
// stuff
};
}

render () {
return (


{ ... }


);
}
}

const Layout = ({ children }) => {
// __IFRAME_CONTENT__ is replaced during the browserify build operation to match a one-line version of a HTML template, which embed custom iframe-scoped style
return (

{ ... }
{children}

);
};

const Router = ({ history }) => {
return (



{ ... }



);
};

// `app` is the button my sdk creates and mounts into the client's webpage
ReactDOM.render(


,
app
);
```

Can you please take a look to confirm that we did identify the issue correctly, and give us more insight on whether or not the required window/document configuration option will be implemented ?

Thanks for your help :)

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Línea de trabajo

No se especifica ningún archivo del repositorio ni ninguna prueba. Empieza rastreando la ruta de carga asíncrona de scripts de react-async-script y reproduciendo el caso de react-google-recaptcha dentro de react-frame-component; el trabajo estará terminado cuando los callers puedan seleccionar el contexto window/document del iframe y el caso de uso indicado funcione allí.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react
Área
frontend, web-dev
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
28/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.