极客观点
项目管理
HarmonyOS
赏金更新
我目前在我的 iframe 中使用 src=“url” 来加载 ReactApp，这对我来说不是最佳选择，因为这将允许用户右键单击并“在新窗口中打开”。
我正在寻找的最佳解决方案是将我的 bundle.js 与一个或类似的解决方案一起写入 iframe。 src 将保持空白，因此用户无法方便地右键单击以在新窗口/选项卡中打开。
我正在探索如何使用 React 来制作可嵌入的小部件，所以我从谷歌搜索中得到了以下信息。但是，我的不呈现，并返回以下消息。
错误信息[Error] Invariant Violation：目标容器不是 DOM 元素。
我将 create-react-app 用于我的可嵌入应用程序，我只有 2 个简单文件。
索引.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(
<App />, document.getElementById('root')
)
应用程序.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();
现在在远程站点上，我在标头中只有以下脚本来调用上面的 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 与 id 为 root 的 div 一起添加到 iframe 的标头中
但是，不显示。
感谢有人可以带我进入下一步。我正在使用 create-react-app 来创建我的反应文件（这是我学到的唯一方法。）
原文由 Someone Special 发布，翻译遵循 CC BY-SA 4.0 许可协议
为了满足同源策略（防止 CORS 错误），设置
<iframe>的srcdoc属性而不是尝试write。作为额外的好处，您可以禁用右键单击上下文菜单：
这作为一种安全措施是完全没有用的，但它只是作为一个转移注意力的东西存在。自行打开框架时显示的页面将不包含内容。仅当 iframe 页面中没有用户想要复制的内容时才这样做；这并不能阻止他们这样做，但如果你真的想复制一些东西，那 真的很 烦人。
演示：