web-dev-qa-db-ja.com

反応コンポーネントのiframeコンテンツを設定する方法

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;

何が間違っていますか？

javascriptiframereactjsxmlhttprequest
20
user3807940

誰かがiframe内に小さなHTMLを表示したい場合、より簡単な解決策があります。

<iframe src={"data:text/html,"+encodeURIComponent(content)}/>

コンテンツの最大長は32768文字です。

react-frame-component パッケージを使用するのも簡単です。これは受け入れられた回答で言及されています。

4
Jakub Zawiślak

iframeのsrcdoc属性を使用できます。動作します！

srcdoc：埋め込みHTML、src属性をオーバーライドします。

読む： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

1
Kaleem Elahi

これも機能します（IEではサポートされていません）。

const myHTML = <h1>Hello World</h1>
<iframe srcDoc={myHTML} />

詳細はこちら： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

0
Sam Walpole