Tulis semula document.write untuk mencapai pemuatan tidak menyekat iklan js (tambahan)_kemahiran javascript

Pemuatan javascript tanpa sekatan memainkan peranan yang hebat dalam mengoptimumkan prestasi halaman Ini boleh mengurangkan penyekatan js pada pemuatan halaman dengan berkesan. Terutama untuk beberapa fail js pengiklanan, memandangkan kandungan pengiklanan mungkin media kaya, ia mungkin menjadi halangan untuk kelajuan memuatkan halaman anda, javascript berprestasi tinggi memberitahu kami, pelajar, untuk meningkatkan kelajuan halaman web anda, memuatkan JS tanpa menyekat.

Kemudian kod muncul.

(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();

Semua orang sudah biasa dengan perkara di atas. Pelajar yang telah membaca buku itu semua tahu manfaat pemuatan tanpa sekatan Kesannya cukup baik Apabila skrip tidak menyekat itu menghadapi iklan js biasa, masalah penulisan timbul muncul dalam HTML tetapi tiada iklan dipaparkan.

Nani? HTML tidak dipaparkan pada halaman selepas ia keluar?

Lihat kod js pengiklanan dahulu

Salin kod Kod adalah seperti berikut:

document.write('');

Kodnya agak mudah, cuma dokumen.tulis mengeluarkan kod HTML (Saya percaya ramai iklan pengiklan seperti ini. Apakah masalah halaman tidak memaparkan iklan? Masalahnya terletak pada dokumen ini.tulis. kenapa? Mari kita lihat w3schools dahulu untuk melihat bagaimana definisi document.write sangat berguna.

Definisi dan penggunaan
Kaedah write() menulis ungkapan HTML atau kod JavaScript pada dokumen.
Berbilang parameter (exp1, exp2, exp3,...) boleh disenaraikan dan ia akan dilampirkan pada dokumen mengikut susunan.

Kaedah:
Satu ialah menggunakan kaedah ini untuk mengeluarkan HTML dalam dokumen, dan satu lagi adalah untuk menjana dokumen baharu dalam tetingkap atau bingkai selain daripada tetingkap di mana kaedah ini dipanggil. Dalam kes kedua, pastikan anda menggunakan kaedah close() untuk menutup dokumen.

Tetapi prinsipnya ialah ia dilaksanakan semasa proses input aliran halaman Setelah halaman dimuatkan, memanggil document.write() sekali lagi secara tersirat akan memanggil document.open() untuk memadamkan dokumen semasa dan memulakan dokumen baharu. Maksudnya, jika kita menggunakan document.write semula selepas HTML dimuatkan, HTML yang dijana sebelum ini akan dipadamkan dan output kandungan oleh document.write akan dipaparkan.

Dalam contoh kami, jika document.write dikeluarkan dalam HTML selepas halaman dimuatkan, ia tidak akan dilaksanakan. Sekarang kita tahu masalah dan prinsipnya, bagaimana kita menyelesaikan masalah ini?

Menggunakan ajax secara tidak segerak, banyak fail pengiklanan adalah pihak ketiga di bawah nama domain yang berbeza, terdapat masalah merentas domain dan kami tidak dapat mengawal output kod mereka. Dalam kes ini, kami memikirkan cara untuk menulis semula document.write, dan kemudian menulis semula document.write semula selepas fail js dimuatkan. Tengok kod.

Versi pertama memuatkan iklan js tanpa menyekat:

function LoadADScript(url, container, callback){
    this.dw = document.write;
    this.url = url;
    this.containerObj = (typeof container == 'string'?document.getElementById(container):container);
    this.callback = callback || function(){};
  }
  
  LoadADScript.prototype = {
    startLoad: function(){
      var script = document.createElement('script'),
        _this = this;
      
      if(script.readyState){ //IE
        script.onreadystatechange = function(){
        if (script.readyState == "loaded" || script.readyState == "complete"){
          script.onreadystatechange = null;
          _this.finished();
        }
      };
      }else{ //Other
        script.onload = function(){
          _this.finished();
        };
      }
      
      document.write = function(ad){
        var html = _this.containerObj.innerHTML;
        _this.containerObj.innerHTML = html + ad;
      }
      
      script.src = _this.url;
      script.type = 'text/javascript';
      document.getElementsByTagName('head')[0].appendChild(script);
    },
    finished: function(){
      document.write = this.dw;
      this.callback.apply();
    }
  };

Kod panggilan halaman:

var loadScript = new LoadADScript('ad.js','msat-adwrap',function(){ console.log('msat-adwrap'); });
  loadScript.startLoad();
  
  var loadScript = new LoadADScript('ad2.js','msat-adwrap',function(){ console.log('msat-adwrap2'); });
  loadScript.startLoad();
  
  var loadScript = new LoadADScript('ad3.js','msat-adwrap',function(){ console.log('msat-adwrap3'); });
  loadScript.startLoad();

Kod js pengiklanan

//ad.js
document.write('<img src="http://images.cnblogs.com/logo_small.gif" alt="Logo">');

//ad2.js
document.write('<img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129" usemap="#mp">');

//ad3.js
document.write('<img alt="Google" height="95" id="hplogo" src="http://www.google.com/images/srpr/logo3w.png" width="275">');

Masalah dengan versi pertama ialah apabila berbilang fail dipanggil, beberapa masalah akan berlaku:

1. Disebabkan oleh kelajuan pemuatan fail yang berbeza, sesetengah mungkin dimuatkan dahulu dan beberapa mungkin dimuatkan kemudian, yang tidak teratur, dan banyak kali perkara yang kita perlukan adalah teratur. Sebagai contoh, kita perlu memuatkan iklan skrin pertama terlebih dahulu.

2. Saya rasa sesetengah iklan perlu menetapkan beberapa parameter terlebih dahulu, seperti google adsense

Untuk menyelesaikan kedua-dua masalah ini, kami mengubahsuainya lagi ke dalam versi pemuatan js tanpa sekatan terakhir.

Kod halaman HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>new_file</title>
    <script type="text/javascript" src="loadscript.js"></script>
  </head>
<body>
<div id = "msat-adwrap"></div>
<div id = "msat-adwrap2"></div>
<script type="text/javascript">
  loadScript.add({
    url:'ad.js',
    container: 'msat-adwrap',
    callback:function(){ console.log('msat-adwrap'); }
  }).add({
    url:'ad2.js',
    container: 'msat-adwrap2',
    callback:function(){ console.log('msat-adwrap2'); }
  }).add({//google adsense
    url:'http://pagead2.googlesyndication.com/pagead/show_ads.js',
    container: 'msat-adwrap',
    init: function(){
      google_ad_client = "ca-pub-2152294856721899";
      /* 250x250 rich */
      google_ad_slot = "3929903770";
      google_ad_width = 250;
      google_ad_height = 250;
    },
    callback:function(){ console.log('msat-adwrap3'); }
  }).execute();
</script>
</body>
</html>

loadscript.js kod sumber

/**
 * 无阻塞加载广告
 * @author Arain.Yu
 */

var loadScript = ( function() {
  var adQueue = [], dw = document.write;
  //缓存js自身的document.write

  function LoadADScript(url, container, init, callback) {
    this.url = url;
    this.containerObj = ( typeof container == 'string' ? document.getElementById(container) : container);
    this.init = init ||
    function() {
    };


    this.callback = callback ||
    function() {
    };

  }


  LoadADScript.prototype = {
    startLoad : function() {
      var script = document.createElement('script'), _this = this;

      _this.init.apply();

      if(script.readyState) {//IE
        script.onreadystatechange = function() {
          if(script.readyState == "loaded" || script.readyState == "complete") {
            script.onreadystatechange = null;
            _this.startNext();
          }
        };
      } else {//Other
        script.onload = function() {
          _this.startNext();
        };
      }
      //重写document.write
      document.write = function(ad) {
        var html = _this.containerObj.innerHTML;
        _this.containerObj.innerHTML = html + ad;
      }

      script.src = _this.url;
      script.type = 'text/javascript';
      document.getElementsByTagName('head')[0].appendChild(script);
    },
    finished : function() {
      //还原document.write
      document.write = this.dw;
    },
    startNext : function() {
      adQueue.shift();
      this.callback.apply();
      if(adQueue.length > 0) {
        adQueue[0].startLoad();
      } else {
        this.finished();
      }
    }
  };

  return {
    add : function(adObj) {
      if(!adObj)
        return;

      adQueue.push(new LoadADScript(adObj.url, adObj.container, adObj.init, adObj.callback));
      return this;
    },
    execute : function() {
      if(adQueue.length > 0) {
        adQueue[0].startLoad();
      }
    }
  };
}());