廣告等第三方應用嵌入到web頁面方案之使用js片段

原文鏈接：https://blog.csdn.net/WuLex

在自己的項目中嵌入過廣告的朋友們可能都用過百度聯盟, 只需要嵌入如下一段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

1.使用document.write

document.write直接在當前文檔流中寫入字符串，一旦文檔流已經關閉，就打開新的文檔流並寫入，原來的文檔流會被清空，已渲染好的頁面就會被清除，瀏覽器將重新構建DOM並渲染頁面.所以使用這種方案, 就一必須是同步執行嵌入的這段js代碼, 作爲第三方腳本引入,阻塞性的腳本會阻止主頁面的渲染,如果js文件加載遲緩,甚至不可用的, 會給主頁面造成嚴重的性能問題, 所有不建議使用.

2.操作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