代码之家 › 专栏 › 技术社区 › Abraham Gnanasingh

使用reactjs加载具有document.write的外部脚本

react-dom dom reactjs html javascript

Abraham Gnanasingh · 技术社区 · 6 年前

我正在尝试使用下面的脚本加载cricruns小部件, document.write 这将把小部件加载到我给出的特定容器中。我怎样才能做到这一点 render() 在反应中?

<script src="//www.cricruns.com/system/application/views/widgetBase/wid_300_200_1.js" type="text/javascript"></script>

请检查这个 fiddle 更多关于我正在努力实现的目标。

事先谢谢。

1 回复 | 直到 6 年前

twils0 6 年前

***更新:好的,我已经玩过了。如果您只是绕过document.write并直接使用危险的lysetinnerhtml添加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&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=320 " scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:310px; height:250px;" allowTransparency="true"></iframe>
  `}} />;
};

render(<App />, document.getElementById("root"));

推荐文章