項目中遇到插入廣告的需要，而廣告的信息只是一個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>
效果如下:
