使用 ReactJS 加载具有 document.write 的外部脚本
Load external script which has document.write using ReactJS
我正在尝试使用以下脚本加载 cricruns 小部件,该脚本具有 document.write
,它将在我指定的特定容器中加载小部件。我怎样才能在 ReactJS 的 render()
中实现这个?
<script src="//www.cricruns.com/system/application/views/widgetBase/wid_300_200_1.js" type="text/javascript"></script>
请查看此 fiddle 以了解更多关于我正在努力实现的目标。
提前致谢。
***更新:好的,我已经试了一下。如果您只是绕过 document.write 并使用 dangerouslySetInnerHTML 直接添加 iframe,它就会起作用。我在下面添加了一个工作代码和一个代码示例。
希望对您有所帮助!
https://codesandbox.io/s/z6k1w94z8m
import React from "react";
import { render } from "react-dom";
const App = () => {
return <div dangerouslySetInnerHTML={{__html: `
<iframe src="https://www.cricruns.com/widgetbase/wid_300_200_1"; width=250&colorscheme=light&show_faces=true&stream=false&header=true&height=320 " scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:310px; height:250px;" allowTransparency="true"></iframe>
`}} />;
};
render(<App />, document.getElementById("root"));
我正在尝试使用以下脚本加载 cricruns 小部件,该脚本具有 document.write
,它将在我指定的特定容器中加载小部件。我怎样才能在 ReactJS 的 render()
中实现这个?
<script src="//www.cricruns.com/system/application/views/widgetBase/wid_300_200_1.js" type="text/javascript"></script>
请查看此 fiddle 以了解更多关于我正在努力实现的目标。
提前致谢。
***更新:好的,我已经试了一下。如果您只是绕过 document.write 并使用 dangerouslySetInnerHTML 直接添加 iframe,它就会起作用。我在下面添加了一个工作代码和一个代码示例。
希望对您有所帮助!
https://codesandbox.io/s/z6k1w94z8m
import React from "react";
import { render } from "react-dom";
const App = () => {
return <div dangerouslySetInnerHTML={{__html: `
<iframe src="https://www.cricruns.com/widgetbase/wid_300_200_1"; width=250&colorscheme=light&show_faces=true&stream=false&header=true&height=320 " scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:310px; height:250px;" allowTransparency="true"></iframe>
`}} />;
};
render(<App />, document.getElementById("root"));