2016-03-01 2 views
0

Мне нужно показать html-страницу внутри iframe. Я использую fetch для получения контента, потому что у страницы есть аутентификация. Я не получаю никаких ошибок, и я не вижу никакого содержания слишкомreactjs iframe не отображается html

someFunc() { 
    const myIframe = this.refs.myIframe;  
    fetch('http://example.com/example.html', { 
    method: 'GET', 
    headers: { 
     'Content-Type': 'text/html', 
     'Authorization': 'Basic xyz' 
    } 
    }).then(function(response) { 
     return response.text(); 
    }).then(function(text){ 
     //assign srcDoc to text 
     return <iframe srcDoc={text}></iframe>; 
    }); 
} 
render() { 
    return (<div>{this.someFunc()}</div>) 
} 

ответ

0

Почему вы не просто делать: <iframe src="http://example.com/example.html"></iframe>?

В противном случае причина, по которой он не работает, заключается в том, что тогда выполняется после возврата функции. Так что вы можете сделать, это создать какой-то состояние ребенка и установить его в то функции и сделать его в renderfunction:

var Example = React.createClass({ 
componentDidMount: function() { 
    var setState = this.setState; 
    const myIframe = this.refs.myIframe;  
    fetch('http://example.com/example.html', { 
    method: 'GET', 
    headers: { 
     'Content-Type': 'text/html', 
     'Authorization': 'Basic xyz' 
    } 
    }).then(function(response) { 
     return response.text(); 
    }).then(function(text){ 
    setState({child: <iframe srcDoc={text}></iframe>}); 
    }); 
}, 
getInitialState: function() { 
    return {child: <div> hello </div>}; 
}, 
render: function() { 
    return (<div>{this.state.child}</div>) 
} 
}); 

React.render(
    <Example />, 
    document.getElementById('mount-point')); 
+0

я переехал выборки внутри componentDidMount и установить состояние ребенка, но я до сих пор не вижу IFrame. внутри рендеринга я сделал {this.state.child} – shresthaal

+0

ok, я сделаю код. –

+0

Я отредактировал его, у меня проблемы с вашей выборкой из-за корса, но в основном он должен работать на сайте-ответчике. –

Смежные вопросы