Javascript ReactJS-如何在服务器端呈现iframe内部内容，用于SEO？_Javascript_Iframe_Reactjs

Javascript ReactJS-如何在服务器端呈现iframe内部内容，用于SEO？

javascript iframe reactjs

Javascript ReactJS-如何在服务器端呈现iframe内部内容，用于SEO？,javascript,iframe,reactjs,Javascript,Iframe,Reactjs,我正在使用Facebook的React JS框架开发一个支持客户端和服务器端渲染的应用程序我需要呈现一个iframe，其中包含一些html。HTML是使用我可以访问的脚本创建的但是，我希望在服务器上呈现内部内容，以便HTML显示在搜索引擎中。问题是，对于要创建的内部内容，它通常需要等待iframe“加载”，这在服务器上不会发生我该怎么做以下是我尝试过的，但不起作用： render: function() { return ( <div>

我正在使用Facebook的React JS框架开发一个支持客户端和服务器端渲染的应用程序

我需要呈现一个iframe，其中包含一些html。HTML是使用我可以访问的脚本创建的

但是，我希望在服务器上呈现内部内容，以便HTML显示在搜索引擎中。问题是，对于要创建的内部内容，它通常需要等待iframe“加载”，这在服务器上不会发生

我该怎么做

以下是我尝试过的，但不起作用：

render: function() {
      return (
        <div>
          <iframe
            ref="myIframe">
          </iframe>
        </div>
      );
    },
componentDidMount : function() {
    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');
}

render:function（）{
返回(
);
},
componentDidMount:function（）{
var iFrameNode=this.refs.myIframe，
frameDoc=iFrameNode.contentWindow.document；
frameDoc.write（“…更多html”）；
}

请注意，我在componentDidMount上添加内容，因为否则在加载iframe时它会被“擦除”

iFrame有时用于在网页上显示内容。内容通过iFrame显示的内容可能没有索引，并且可以显示在中谷歌的搜索结果。我们建议您避免使用 iFrame以显示内容。如果确实包含iFrame，请确保提供指向所显示内容的其他基于文本的链接，以便谷歌机器人可以抓取和索引这些内容

因此，从SEO的角度来看，您要么停止在这里使用iFrame，要么接受它不会被索引

聪明的技巧，如将其放入html，然后将其切换到iframe，不会有帮助，因为Googlebot使用JavaScript。。。除非您使用useragent嗅探发送空JavaScript文件，但我不建议这样做

如果

，直接的答案是使用uu危险的西汀HTML！这个.state.x

，在componentDidMount

setTimeout（（）=>this.setState（{x:true}）中，0）

，并将html注入componentDidUpdate中的iframe中。

一个好方法是使用。它允许通过src属性将html内容插入iframe。当前除IE之外的所有浏览器都支持（部分支持-无html选项）-

这将允许google搜索引擎在服务器端读取iframe的内容

所以你的代码应该是-

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');
    }

render:function（）{
var frameSrc=browser.ie？“”：“数据：文本/html，…更多html”>”
返回(
有一个React组件用于渲染iFrame：
您可以通过npm install react iframe
获得它，然后在react代码中这样使用它：
import React from 'react';
import Iframe from 'react-iframe';
...
// In your render function:
<Iframe url="whatever.html" />

从“React”导入React；
从“react Iframe”导入Iframe；
...
//在渲染函数中：

不幸的是，对于我来说，我更愿意将服务器生成的HTML呈现为
而不是实际的
。
感谢您花时间回答，但这是错误的。使用setTimeout对服务器端呈现毫无帮助，尽管google write“可能不会被索引”，但这绝对是错误的是的，但它不是自动的。网站管理员指南和开发者指南不一样，因为美国开发者实际上可以对此做些什么。一定要验证Gyro的方法是否有效（在修复明显错误后）。数小时来一直在试图找出如何引用
中的变量。感谢您提供的代码示例：）