JavaScript >> Javascript 文檔 >  >> JavaScript

並非所有事情都必須在服務器端完成

這是我隨機包含 LeanPub 嵌入的一個 JavaScript 小技巧(例如,就像右側邊欄中的那個)。

<script>
jQuery(document).ready(function(){
  var slugs=['rapid-prototyping-with-js','ohmyjs'];
  var index =Math.round(Math.random());
  jQuery('#leanpub').html('<iframe width="188" height="400" src="https://leanpub.com/'+slugs[index]+'/embed" frameborder="0" allowtransparency="true"></iframe>');});
</script>
<div id="leanpub"></div>

並非所有事情都必須在服務器端完成!此代碼段的額外好處是它在頁面的其餘部分之後加載嵌入 (感謝 jQuery(document).ready 包裝器)。這會顯著降低網站加載速度(在我的情況下為 0.5-2 秒),因為 iframe 生成是最耗時的瀏覽器操作之一。

要將它與您的 LeanPub 書籍一起使用,只需用數組中的書籍替換 slug,然後粘貼到 HTML 頁面(或像我一樣的 WordPress 小部件)。如果你有兩本書以上,多本

Math.random()

按書籍數量,例如10本書:

Math.random()*10


Tutorial JavaScript 教程
  1. 將 Storybook 6.1 與 Next.js 和 Emotion 11 一起使用 - 高級用法和最佳實踐

  2. 在 Angular 中實現功能標誌比您想像的要容易!

  3. Makefile 食譜我

  4. Typescript hack:用於更改鍵類型的簡單實用程序類型

  5. Istio 混沌工程:我本來打算這樣做

  6. 純函數以及為什麼它們是一個好主意

  7. 完整教程 #12:使用 GraphQL 進行查詢和在 Recoil 中存儲數據 |使用 React、Node 和 GraphQL 的微服務聊天應用程序

  1. react-circular-input — 用於輕鬆組合圓形範圍輸入的 React 組件

  2. 漸進式 Web 應用程序 - 為什麼、如何以及為什麼不

  3. 網絡上的多媒體和明智地使用 HTML5

  4. 將輸入參數傳遞給返回的 JS 函數

  5. JSON 服務器入門

  6. 終極基本編碼器參考(Bash、Git、VSCode、Nodejs 等)

  7. 如何創建新的 Firestore 數據庫

  1. React 應用的樣式化組件簡介

  2. 天才之路:卓越#52

  3. 如何修復 WordPress 中的槓桿瀏覽器緩存警告

  4. 通過構建 Whac-A-Mole 遊戲開始使用 React