Updated for Bounty
I am currently using src="url" in my iframe to load the ReactApp which is not optimal for me as that will allow user to right-click and "Open In New Window".
The optimal solution which I'm looking for is to write my bundle.js into the iframe together with a or simliar solution. The src will remain as blank so user cannot conveniently right click to open in new window/tab.
我正在探索如何使用 React 来制作可嵌入的小部件，所以我从谷歌搜索中得到了以下信息。但是，我的不呈现，并返回以下消息。
错误信息 [错误] 不变违规:目标容器不是 DOM 元素。
我的可嵌入应用程序使用 create-react-app，我只有 2 个简单的文件。
index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(
<App />, document.getElementById('root')
)
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>This is an embedable widget</div>
)
}
}
export default App;
我创建了一个 test.js，它将在远程 iframe 中调用，使用下面的简单代码生成 html，包括 js 包以及带有 id 的 div。
这是test.js
//Creates Div
var d = document.createElement("div");
document.body.appendChild(d);
//Creates iFrame
var n = document.createElement("iframe");
n.id = "microcom-frame";
n.style.width = "100%";
n.style.height = "100%";
n.style.background = "transparent";
n.style.position = "relative";
n.style.margin = 0;
n.style.border = "none";
n.style.overflow ="hidden";
n.style.display = "block";
//Append iFrame inside Div
d.appendChild(n);
//Write content to iFrame
n.contentWindow.document.open("text/html", "replace"),
n.contentWindow.document.write("\n <!doctype html>\n <head><script src='http://localhost:3001/static/js/bundle.js' type='text/javascript'></script></head>\n <body><div id='root'></div></body>\n </html>"),
n.contentWindow.document.close();
现在在远程站点上，我只需要在 header 中使用以下脚本来调用上面的 test.js。
<script>
(function() {
var d = document,
h = d.getElementsByTagName('head')[0],
s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://localhost:3001/test.js';
h.appendChild(s);
} )();
</script>
现在是这个....
- test.js 加载成功
- div创建成功
- iframe 创建成功
- 我可以看到 bundle.js 添加到 iframe 的 header 中 id为root的div
但是，不显示。
感谢有人能带我进入下一步。我正在使用 create-react-app 来创建我的 React 文件(这是我学到的唯一方法。)
最佳答案
为了满足同源策略(防止 CORS 错误)，设置 <iframe>的 srcdoc属性而不是尝试 write
n.srcdoc = "\n <!doctype html>\n <head><script src='http://localhost:3001/static/js/bundle.js' type='text/javascript'></script></head>\n <body><div id='root'></div></body>\n </html>";
作为额外的好处，您可以禁用右键单击上下文菜单:
n.contentWindow.document.addEventListener("contextmenu", function(e){
e.preventDefault();
return false;
}, false);
作为一种安全措施，这是完全没有用的，但它只是作为一个转移注意力的东西存在。自行打开框架时显示的页面将不包含内容。仅当 iframe 页面中没有用户想要复制的内容时才这样做；这并不能阻止他们这样做，但如果您确实想复制某些内容，那真的会很烦人。
演示:
//Creates Div
var d = document.createElement("div");
document.body.appendChild(d);
//Creates iFrame
var n = document.createElement("iframe");
n.id = "microcom-frame";
n.style.width = "100%";
n.style.height = "100%";
n.style.background = "transparent";
n.style.position = "relative";
n.style.margin = 0;
n.style.border = "none";
n.style.overflow ="hidden";
n.style.display = "block";
//Append iFrame inside Div
d.appendChild(n);
//Write content to iFrame
n.srcdoc = "<!doctype html><html><head></head><body><div id='root'>Example content</div></body></html>";关于javascript - 在远程站点 iFrame 中嵌入 Reactjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49626885/