react中嵌入网页_React页面插入script

news/2024/7/4 1:40:13 标签: react中嵌入网页

项目中遇到插入广告的需要,而广告的信息只是一个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.οnclick= 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;

})();

失败一:

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


http://www.niftyadmin.cn/n/1122505.html

相关文章

工具.USB抓包软件(Win)

1、分享三个USB抓包软件---Bus Hound,USBlyzer 和-USBTrace - CSDN博客.html(http://blog.csdn.net/chentengkui/article/details/72566859) 原贴:分享三个USB抓包软件---Bus Hound,USBlyzer 和-USBTrace - USB - 安富…

ylb-算法-算法总结

ylbtech-Arithmetic:ylb-算法-算法总结-- -- ylb:算法-- type:算法总结-- thankyou:sunshine, 谢谢你的默默付出-- 10:50 2012-04-06-- 1,递归thankyou:Ma yuntao Teacher总结:递归的算法要点“要知道循环什么时候结束&#xff0c…

如何解决fd跨线程安全问题

fd跨线程是不安全的,当一个线程close它后,就相当于成了野指针,另一线程再使用就成了对野指针的使用,当系统调用使用一个已经close后的fd时,可能出现内核报错,如果安全使用它了?有两个办法&#…

python编码器用什么意思_Python中的反向标签编码器特性

考虑下面的示例表,我试图对其进行预测如您所见,我混合了数值(Num1&Num2)和分类特征(Cat1&Cat2)来预测一个值,我使用随机森林回归来预测读入文件后,我使用LabelEncoder将分类特征转换为数字特征,如下所示catego…

catia打开后拖动工具栏有残影_C4D教程,关于C4D基础图文教程:C4D标题栏、菜单栏、工具栏讲解...

大家好,我是爱踢汪。今天又给大家送上一波福利。如果有接触过3dsmax基础的同学,迁移过来学习C4D当然会很快;又如果你和小编一样,是第一次接触C4D这样的三维软件,也没有关系,我们就从c4d入门基础知识开始学习…

Java杨辉三角

1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 1 6 15 20 15 6 1 1 7 21 35 35 21 7 1 1 8 28 56 70 56 28 8 1 1 9 36 84 126 126 84 36 9 1 代码如下: public class yanghui { static void yanghuisanjiao(){ int[][]numnew int[10][10]; num[0…

C#的解题思路(1):不重复随机数的产生问题

说明:写作本文的出发点是最近和一个有3年开发经验的.NET开发人员聊天,他跟我说经常没有思路,在实际开发中我也见过一个具有4、5年开发经验的开发人员几乎没有灵活变通的能力,所以打算写一系列文章,在这个系列文章中我会…

RHEL5下TC流量控制与iptables完美结合的真实案例

正在编写,敬请关注转载于:https://blog.51cto.com/linux6/383002