score:9

Accepted answer

A good way to do it is to use data URI scheme. It allows inserting html content to an iframe via the src attribute. Currently supported on all browsers except IE (partial support - no html option) - caniuse.

This will allow google search engine to read the content of the iframe on the server side.

So your code should be -

render: function() {
      var frameSrc = browser.ie ? '' : 'data:text/html,<html><body style="margin:0px;">...more html">'
      return (
        <div>
          <iframe
            ref="myIframe"
            src="{frameSrc}"
          </iframe>
        </div>
      );
    },
componentDidMount : function() {
    if (browser.ie) { //some browser detection library/code
        var iFrameNode = this.refs.myIframe,
            frameDoc = iFrameNode.contentWindow.document;
        frameDoc.write('<html><body style="margin:0px;"><div><script type="text/javascript" src="..."></script></div> ... more html');
    }

}

score:0

There is a React component to render iframes: https://github.com/svenanders/react-iframe

You can get it with npm install react-iframe, then use it like this in your React code:

import React from 'react';
import Iframe from 'react-iframe';
...
// In your render function:
<Iframe url="whatever.html" />

Unfortunately for me, I would actually prefer to render my server-generated HTML into a <div> rather than an actual <iframe>...

score:2

IFrames are sometimes used to display content on web pages. Content displayed via iFrames may not be indexed and available to appear in Google's search results. We recommend that you avoid the use of iFrames to display content. If you do include iFrames, make sure to provide additional text-based links to the content they display, so that Googlebot can crawl and index this content.

- Google Webmaster Guidelines

So from a SEO standpoint, you either need to stop using iframes here or accept that it won't be indexed.

Clever tricks like putting it in the html, and then switching it to an iframe won't help because Googlebot uses JavaScript... unless you do useragent sniffing to send empty JavaScript files, but I don't recommend that.


The direct answer is to use __dangerouslySetInnerHTML if !this.state.x, and in componentDidMount setTimeout(() => this.setState({x: true}), 0), and inject the html into the iframe in componentDidUpdate.


Related Query

More Query from same tag