reactjs iframe不显示html
问题描述:
我需要在iframe中显示html页面。我使用获取获取内容,因为该页面具有身份验证。我没有收到任何错误,我没有看到任何内容太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>)
}
答
为什么你不只是做:<iframe src="http://example.com/example.html"></iframe>
?
否则,它不起作用的原因是then函数返回后执行。所以,你可以做的是创造一些国家的孩子,并设置它在当时的作用,并使其在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'));
我感动componentDidMount内提取和设置的孩子的状态,但我仍然没有看到iframe中。里面渲染我做{this.state.child} – shresthaal
好的,我会做一个codepen。 –
我编辑它,我有问题,因为Cors你的获取,但基本上它应该为反应网站工作。 –