Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

如何在靜態頁引入動態判斷的區塊

一般這類的應用是在 ad, log, tracking, member real-time info, 動態內容靜態化處理等等…
雖然有即時更新的好處,但缺點就是多一個 js 請求,內容不利於 SEO,會操伺服器。

  1. 將需要動態判斷的區塊改用 js 引入檔,區塊內容改用 js 格式輸出。
    1. 將 html 改用 document.write 輸出,注意 document.write 的操作要在 DOM Ready 之前。
    2. 脫掉原先的 <script> 區塊的 script 標籤外衣,還有 browser 相容性註解。
    3. 來產生 js,注意 及 js 語法的切換及串接, 會先行解析完成,再組合出 js 語句。
  2. 注意本身這個 js 是一個動態程式,例如
  3. 即使 js 本身是 還是會被 browser 快取住,所以要讓每一次 js 引入請求都是 unique 的連結。
  4. 這個 unique 的連結,要在客戶端完成,而不是伺服端完成,這樣才可以讓靜態頁也能動態引入。
  5. 改用 js 動態產生 unique 連結時,要留意網址的參數串接,不能用 &amp; 要改用 &。
  6. 若有 ssl 切換問題,要在 js 作好 http 及 https 的切換。

程式碼:

<script type="text/javascript">
<!-- <![CDATA[
var ts = Math.random();
document.write('<scr' + 'ipt type="text/javascript" src="http://xxx.example.com/js?id=121&' + ts + '"><\/scr' + 'ipt>');
// ]]> -->
</script>

程式碼:

<script type="text/javascript">
<!-- <![CDATA[
document.write(unescape("%3Cscript src='" + (("https:" == document.location.protocol) ? "https://" : "http://") + "xxx.example.com/?id=123&charset=" + (document.characterSet ? document.characterSet.toUpperCase() : (document.charset ? document.charset.toUpperCase() : "UTF-8")) + "&n=" + Math.random() + "' type='text/javascript'%3E%3C/script%3E"));
// ]]> -->
</script>

Leave a Reply

*