项目中遇到插入广告的需要，而广告的信息只是一个url链接，这个链接返回的时一个js，和以前插入广告有点不同。所有找了很多方式。

先来展示广告链接返回的信息：

假设广告链接为：http://192.168.1.1:8081/advert/getAdvert?flowerId=1987&advertType=2

链接返回的信息，目的是在指定位置插入广告元素div节点：

(function(){

　　var json = {"AdvertName":"图片广告","AdvertDesc":"图片广告","AdvertHeight":"100%","AdvertId":63102,"AdvertImage":"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=831914849,3674285067&fm=11&gp=0.jpg",
　　　　　　　　　　"AdvertWidth":"100%","JumpUrl":"http://192.168.1.1:8081/advert/JumpAdvert?advertId=63102&flowerId=1987&orderMark=763db82c8480485ea5a98594d8d69ebc&merchantCode=","AdvertWord":"图片广告"};

　　var div = document.createElement("div");  //创建一个div元素

　　div.style.width = "100%";

　　div.style.overflow = "hidden";

　　var img = document.createElement("img");  //创建一个img元素

　　img.src = json.AdvertImage;

　　img.style.maxWidth="100%";

　　img.onclick = function(){location.href=json.JumpUrl;}  //img元素增加一个click事件，调整到指定页面

　　div.appendChild(img);  //将img元素插入的div元素中

　　var scripts = document.getElementsByTagName("script");  //**注意：这行代码目的是添加创建的div元素到指定位置，对应但对于react这种已经渲染的，就会发现script在id=root元素外面，导致无法看到效果，原生的html是一行一行执行，所有可以正常渲染。

　　var script = scripts[scripts.length - 1];

　　var dom = script.parentNode;

　　dom.removeChild(script);

　　dom.appendChild(div);

　　div = null;

　　img = null;

　　scripts = null;

　　script = null;

　　dom = null;

})();

失败一：

<div id="append"  style={{width:'100%', height: 200}}>

     {/*在指定位置引用广告链接， 结果被当成一个文本显示，效果就好像被注释的代码一样没有任何效果。*/}

     <script type="text/javascript" src='http://192.168.1.1:8081/advert/getAdvert?flowerId=1987&advertType=2'></script>

</div>

失败二， 使用dangerousInnerHTML方式：

 <div id="append"  style={{width:'100%', height: 200}} dangerouslySetInnerHTML={{__html:"<script type='text/javascript' src='http://192.168.1.1:8081/advert/getAdvert?flowerId=1987&advertType=2'></script>"}}>

  </div>

结果都没效果，但在界面上有节点显示：

最后使用了document.createElement创建script元素

  componentWillMount() {

    let script = document.createElement('script');

    script.type = 'text/javascript';

    script.src = 'http://192.168.1.1:8081/advert/getAdvert?flowerId=1987&advertType=2';

    document.getElementById('root').appendChild(script);

  }

//如果在componentWillMount中插入，只能指定root，因为此时页面还没有渲染出来，找不到append元素，需要在指定位置渲染，就要在componentDidMount中此时元素已经渲染完成
componentDidMount () { 
  let script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://192.168.1.1:8081/advert/getAdvert?flowerId=1987&advertType=2';
  document.getElementById('append').appendChild(script);
}

此时广告元素已经出来只是位置不对，这里应该可以让接口那里调整下，或者接口直接返回广告的div元素，可以尝试把广告元素拖到指定位置就可以看到效果

下面来展示在原生HTML的实现：

 <body>

    <div>

    广告位一：

        <script type="text/javascript" src='http://192.168.1.1:8081/advert/getAdvert?flowerId=1987&advertType=2'></script>

    <div>

    <div>

    广告位二：

        <script type="text/javascript" src='http://192.168.1.1:8081/advert/getAdvert?flowerId=1987&advertType=2'></script>

    <div>

 </body>

效果如下:

React页面插入script的更多相关文章

  1. JS在当前页面插入<script>标签,并执行

    将<script>标签绑定到<html>上, html可换成body,header等其他存在的标签. var htmm =document.getElementsByTagNa ...

  2. react页面内嵌微信二维码 和 自定义样式 以及 微信网页共用unionId问题

    在react页面内嵌“微信二维码”,实现PC端通过微信扫码进行登录.首先去微信开放平台注册一个账号,创建一个网站应用,提交网站备案审核,获取appid和appsecret:其他开发流程根据微信文档来进 ...

  3. React 页面间传值的个人总结

    react 组件之间传值的方案有很多,下面是我个人经验的总结 props 来传递值 传值方式: 通过props 获取值 通过props 提供的func去修改值 优点: 不需要任何第三方的组件,纯rea ...

  4. 为什么在留言处插入<script>alert(1)</script>不弹框

    对于新手来说,往往会在留言地方插入<script>alert(1)</script>来检测是否有存储xss,事实是基本上不会弹框的,为啥? 通过查看源码,可知道<> ...

  5. 通过js 实现 向页面插入js代码并生效，和页面postMessage通讯

       此文章针对已经搭建好jenkins和会使用iconfont图标库而写. 主要目标就是在不通过更改html文件,完成页面交互图标信息,因为美工最多可以上传代码并且自动发布,并不会在Html中加入我 ...

  6. 关于从JSP页面插入数据到数据库中乱码问题的解决

    问题描述:最近我在写一个j2ee的留言板系统模块,遇到了一个非常让我头大的问题,当我从JSP页面输入数据后,通过hibernate中的业务逻辑类HQL语句把这个数据插入到本地的mysql数据库中,可是 ...

  7. 解决页面插入HTML代码后错位（HTML代码里的标签不完整导致错位）

    这个的例子是从数据库读取出来的数据内容包含HTML导致页面错位问题! 解决办法如下: 首先过滤掉会跟JS冲突的字符,C#代码如下: string htmlc = Model.HtmlContents. ...

  8. Html页面插入flash代码

    转自:http://www.educity.cn/jianzhan/402117.html 转自:http://www.cnblogs.com/yxc_fj/articles/1390621.html ...

  9. 页面插入Flash方式

    法一 <!-- 播放Flash动画代码 --> <div class="logoFlash"> <object classid="clsid ...

随机推荐

  1. 剑指Offer 42. 和为S的两个数字 （其他）

    题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 题目 ...

  2. Mysql 杀死sleep进程

    查询数据库当前设置的最大连接数:查看mysql数据库连接数.并发数相关信息  show global variables like '%max_connections%'; 查看mysql连接数:my ...

  3. JDBC ---获取数据字段 -- 转成map

    getConn = JdbcDataBaseUtil.getConnection(user,pwd,serverUrl,mysqDriver); //建立一个结果集,用来保存查询出来的结果 Resul ...

  4. message box

    QMessageBox 弹出框上的按钮设置为中文   Qt 默认的弹出框上的按钮式英文,虽然也知道是什么意思,但终究不如中文看着顺眼. QMessageBox box(QMessageBox::War ...

  5. CXF develop Webserice Tuturial

    1. 修改pom.xml 在Maven中引入CXF 依赖包 1.1 引入CXF依赖包 ,配置Tomcat插件及其它 <project xmlns="http://maven.apach ...

  6. 记一次Chrome冒充QQ浏览器领取奖励之行

      DNF游戏十周年活动,但是看到活动页面竟然是QQ浏览器专属活动,可是对于QQ浏览器,我内心是拒绝的,所以本着能不下载就不下载的原则,当然是选择放弃它了..... 开玩笑,看到这一活动,虽然奖励不高 ...

  7. C# EasyHook MessageBox 示例（极简而全）

    完整代码,原创无藏私,绝对实用.Windows10 X64 下调试通过,对 w3wp.exe, sqlserver.exe,notepad.exe,iexporer.exe 注入后,长时间运行稳定,未 ...

  8. 使用新标签兼容低版本IE

    HTML语义化 意义:根据内容的结构化(语义化),选择合适的标签,便于开发者阅读和写出更优雅的代码,同时让流浪器的爬虫和机器更好的解析. 尽可能少的使用无语义的标签 div 和 span 在语义不明显 ...

  9. TCP/IP学习20180629-数据链路层-ARP、IP

    1.数据链路层:IP.ARP.RARPARP协议用来找到目标主机的Ethernet网卡Mac地址,IP协议用来承载数据ARP协议找到目标,IP协议传输数据2.IP协议ip协议是TCP/IP协议的核心, ...

  10. 用EXCEL做快速傅立葉轉換_FFT in Excel

    转载来自:http://yufan-fansbook.blogspot.tw/2013/09/excel-fft-fast-fourier-transform02.html [Excel]-用EXCE ...