quiere mostrar la página de enlace externo emergente en React

pathode Vishal:

Estoy tratando de mostrar la página de Google en mi emergente, pero me está dando msg en iframe 'www.google.com negado a conectar'

app.js

import React from 'react';
import Popup from './components/Popup';

class App extends ReactComponent{

    constructor(props){
        super(props);
        this.state = { showPopup:false};
    }

    togglePopup(){
        this.setState({
            showPopup:!this.state.showPopup
            });
    }

    render(){
        return(
            <div>
            <h1> Simple Popup Example InReact Applicaion </h1>
            <button onClick={this.togglePopup.bind(this)}> Click To Launch Popup </button>

            {this.state.showPopup?
                <Popup
                    text='Click "Close Button" to hide popup'
                    closePopup={this.togglePopup.bind(this)}
                />
            : null
            }
            </div>
        };
    }
}

export default App;

Popup.js


import React from 'react';
import  './style.css';

class Popup extends React.Component{

    render(){
        const google = "<iframe width='100%' height='100%' scrolling='no' src='http://www.google.com' sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'></iframe>";

        return(
            <div className='popup'>
                <div className='popup_inner'>
                    <h1> {this.props.text} </h1>
                    <div dangerouslySetInnerHTML={{ __html: google ? google :""}}/>
                    <button onClick={this.props.closePopup}> close me </button>
                </div>
            </div>
        );
    }
}

export default Popup;

Mi enfoque no está funcionando. Puedo ir con el otro enfoque, así si funciona. Gracias por adelantado.

Gaël S:

En primer lugar, se necesitaba reemplazar httppor httpspara fines de seguridad.

Una vez hecho esto, uno conseguirá

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Afirma que Google nos impide utilizar https://www.google.comdirectamente en un iframe.

Sin embargo, gracias a esa pregunta , se demuestra que se puede pasar por alto esta limitación usando otro url: https://www.google.com/webhp?igu=1&gws_rd=ssl ( ejemplo de trabajo aquí)

Supongo que te gusta

Origin http://10.200.1.11:23101/article/api/json?id=392454&siteId=1
Recomendado
Clasificación