在本身的項目中嵌入過廣告的朋友們可能都用過百度聯盟, 只須要嵌入以下一段js代碼片斷, 就能夠在本身的項目中嵌入廣告, 來得到收益.javascript
<script type=「text javascript」> var cpro_id = 「u2557752」; </script> <script src=「http://cpro.baidustatic.com/cpro/ui/cm.js?id='i9898'」 type=「text/javascript」></script>
本文就是主要介紹如何經過嵌入js片斷的方式來嵌入廣告等第三方的應用的, 具體的實現方案有兩種:html
服務端接收到請求後, 從url中提取到參數, 再根據參數從數據庫中查找出對應的數據信息,好比是廣告的話, 就查找到對應的廣告素材, 並將查詢到的數據信息插到javascript模板中,java
瀏覽器執行js腳本代碼,建立出廣告數據庫
首先js文件中提取到參數,根據參數向服務端發起請求, 獲取到對應的數據, 再經過js建立html片斷,輸出到頁面上json
兩種方案對比: 跨域
服務端生成腳本,全部的代碼和數據都包含在生成的js文件中,不須要作額外的請求,適用於內容及樣式相對簡單的頁面.好比只有一個圖片的廣告展現.對於內容較多,樣式較爲複雜的內容展現經過第二種方案實現更加靈活.瀏覽器
兩種方案實現起來, 主要如下幾步: 緩存
1.獲取參數 --> 2.獲取數據 --> 3.輸出html服務器
下面介紹一下腳本參數傳遞的幾種方式的優缺點:異步
1.經過拼接URL傳遞
<script src=「http://cpro.baidustatic.com/cpro/ui/cm.js?cpro_id=u2557752」 type=「text/javascript」></script>
優勢: 可經過URL傳遞到服務器
缺點: 必須進行DOM查詢,沒法緩存
2.經過hash傳遞
<script src=「http://cpro.baidustatic.com/cpro/ui/cm.js#cpro_id=u2557752」 type=「text/javascript」></script>
優勢: 使用URL,便於緩存
缺點: 必須進行DOM查詢
3.自定義屬性
<script data-hxh-coupon-id=‘1234’ src=「http://cpro.baidustatic.com/cpro/ui/cm.js type=「text/javascript」></script>
優勢: 可讀性強, 便於緩存, 易於識別腳本引入代碼的位置
缺點: 必須進行DOM查詢
4.使用全局變量
<script type=「text/javascript」> var couponId = ‘87393’; </script> <script src=「http://cpro.baidustatic.com/cpro/ui/cm.js type=「text/javascript」></script>
優勢: 可讀性強,便於緩存,參數類型靈活,無需進行DOM查詢
缺點: 使用了全局變量
關於獲取數據, 服務端生成腳本, 服務端直接查詢數據, 靜態js腳本方案中, 可以使用jsonP, Cors等方案進行跨域請求.
document.write直接在當前文檔流中寫入字符串,一旦文檔流已經關閉,就打開新的文檔流並寫入,原來的文檔流會被清空,已渲染好的頁面就會被清除,瀏覽器將從新構建DOM並渲染頁面.因此使用這種方案, 就一必須是同步執行嵌入的這段js代碼, 做爲第三方腳本引入,阻塞性的腳本會阻止主頁面的渲染,若是js文件加載遲緩,甚至不可用的, 會給主頁面形成嚴重的性能問題, 全部不建議使用.
操做DOM添加
1.在目標位置嵌入js片斷, 並使用預先定義的ID,class,data-*等(如上)
2.js文件中建立DOM元素,將HTML字符串賦值給元素的innerHTML屬性
3.根據ID,calss,data-*等查詢到腳本所在位置,並將元素添加到DOM中
<script id='hxh-coupon-scandown' type="text/javascript"> (function(){ var script = document.createElement('script'); script.async = true; script.src = 'http://www.boxmars.com?id=123'; var entry = document.getElementsByTagName('script')[0]; entry.parentNode.insertBefore(script, entry); })() </script>
優勢:
1.能夠異步加載第三方DOM, 不阻塞主頁面的渲染,即便js出錯,也不會影響到主頁面
2.能夠將建立的DOM動態插入到已存在的元素以後(便可以追加到已知位置)
缺點:
1.使用字符串拼接不利於HTML片斷的編寫和維護
2.會繼承父頁面樣式
3.主頁面可更改DOM內容
字符串拼接不利於編寫和維護的問題,能夠經過JavaScript模板引擎庫來編寫HTML片斷, 流行模板庫:HandlebarsJS,Mustache,BAIDU-Template,artTemplate等
使用不設置src的iframe
主頁面提供一個不設置src的iframe標籤,經過iframe的contentWindow訪問iframe的DOM,使用document.write將HTML直接寫入到iframe中
var doc = document.getElementsByTagName('iframe')[0].contentWindow.document; doc.writeln("<button id=\'btn\'>點擊</button>"); doc.writeln("<script type=\'text/javascript\'>"); doc.writeln("var btn = document.getElementById(\'btn\');"); doc.writeln("btn.onclick = function(){"); doc.writeln("parent.parentEvent();"); doc.writeln("</script>"); doc.close();
注: iframe由瀏覽器異步處理, 因此此處使用document.write()並不會阻止父頁面的加載
優勢:
1.徹底獨立的DOM環境,不會繼承父頁面的樣式
2徹底獨立的window,避免和主頁面其餘腳本衝突
3.可直接與主頁面進行交互(與iframe引入外部頁面對比)
缺點:
1. Iframe標籤的建立速度慢
2.主頁面能夠訪問iframe的DOM環境並可進行更改
嵌入第三方頁面兩種方案中,另外一種方案(http://www.cnblogs.com/yuqing6/p/8462239.html) 都大篇幅介紹使用了iframe進行html輸出,iframe提供了一種最佳的避免樣式和腳本衝突的嵌入途徑,可是有些狀況在主頁面的DOM中去渲染更爲合適
不適合使用iframe的狀況:
1.須要在iframe外部呈現內容, 場景: 第三方應用中須要彈出對話框時,若是iframe不是覆蓋整個頁面的, 就沒法正常展現對話框
2.一個頁面引入不少個iframe嵌入頁面, 同一個頁面引入許多個iframe時, 會帶來主頁面很大的性能開銷, 對於只是渲染一兩次狀況, 這種性能消耗能夠忽略不計
3.須要繼承父頁面的基礎樣式, 有些時候,但願第三方應用繼承父頁面的基礎樣式, 來和主頁面的樣式風格保持一致,這種狀況不適用於使用iframe