Reactコンポーネントでiframeのコンテンツを設定しようとしていますが、できません。iframeが終了したときに呼び出す必要のある関数を含むコンポーネントがありますその関数では、コンテンツを設定していますが、onload関数がまったく呼び出されていないようです。chrome browser。で試しています。
var MyIframe = React.createClass({
componentDidMount : function(){
var iframe = this.refs.iframe.getDOMNode();
if(iframe.attachEvent){
iframe.attacheEvent("onload", this.props.onLoad);
}else{
iframe.onload = this.props.onLoad;
}
},
render: function(){
return <iframe ref="iframe" {...this.props}/>;
}
});
var Display = React.createClass({
getInitialState : function(){
return {
oasData : ""
};
},
iframeOnLoad : function(){
var iframe = this.refs.bannerIframe;
iframe.contentDocument.open();
iframe.contentDocument.write(['<head></head><style>body {margin: 0; overflow: hidden;display:inline-block;} html{ margin: 0 auto; text-align: center;} body > a > img {max-width: 100%; height: inherit;}', extraCss, '</style></head><body>', this.state.oasData.Ad[0].Text, '</body>'].join(''));
iframe.contentDocument.close();
},
setOasData : function(data){
this.setState({
oasData : JSON.parse(data)
});
},
componentDidMount : function(){
var url = "getJsonDataUrl";
var xhttp = new XMLHttpRequest();
var changeOasDataFunction = this.setOasData;
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
changeOasDataFunction(xhttp.responseText);
}
};
xhttp.open("GET", url, true);
xhttp.send();
},
render : function(){
return (
<MyIframe refs="bannerIframe" onLoad={this.iframeOnLoad} />
);
}
});
module.exports = Display;
何が間違っていますか?
誰かがiframe内に小さなHTMLを表示したい場合、より簡単な解決策があります。
<iframe src={"data:text/html,"+encodeURIComponent(content)}/>
コンテンツの最大長は32768文字です。
react-frame-component パッケージを使用するのも簡単です。これは受け入れられた回答で言及されています。
iframeのsrcdoc
属性を使用できます。動作します!
srcdoc:埋め込みHTML、src属性をオーバーライドします。
読む: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
これも機能します(IEではサポートされていません)。
const myHTML = <h1>Hello World</h1>
<iframe srcDoc={myHTML} />
詳細はこちら: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe