Eta*_*tai 2 javascript iframe reactjs
我正在开发一个使用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');
}
请注意,我在componentDidMount上添加了内容,因为否则在iframe加载时会被"删除".
一个好方法是使用数据URI方案.它允许通过src属性将html内容插入iframe.目前支持除IE之外的所有浏览器(部分支持 - 没有html选项) - caniuse.
这将允许谷歌搜索引擎读取服务器端的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');
}
}