在自己的項目中嵌入過廣告的朋友們可能都用過百度聯盟, 只需要嵌入如下一段js代碼片段, 就可以在自己的項目中嵌入廣告, 來獲得收益.
<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片段的方式來嵌入廣告等第三方的應用的, 具體的實現方案有兩種:
在服務端生成腳本:
服務端接收到請求后, 從url中提取到參數, 再根據參數從數據庫中查找出對應的數據信息,比如是廣告的話, 就查找到對應的廣告素材, 並將查詢到的數據信息插到javascript模板中,
瀏覽器執行js腳本代碼,創建出廣告
直接引入靜態js腳本:
首先js文件中提取到參數,根據參數向服務端發起請求, 獲取到對應的數據, 再通過js創建html片段,輸出到頁面上
兩種方案對比:
服務端生成腳本,所有的代碼和數據都包含在生成的js文件中,不需要做額外的請求,適用於內容及樣式相對簡單的頁面.比如只有一個圖片的廣告展示.對於內容較多,樣式較為復雜的內容展示通過第二種方案實現更加靈活.
兩種方案實現起來, 主要以下幾步:
1.獲取參數 --> 2.獲取數據 --> 3.輸出html
1.傳遞參數
下面介紹一下腳本參數傳遞的幾種方式的優缺點:
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查詢
缺點: 使用了全局變量
2.獲取數據
關於獲取數據, 服務端生成腳本, 服務端直接查詢數據, 靜態js腳本方案中, 可使用jsonP, Cors等方案進行跨域請求.
3.輸出html
- 使用document.write
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