1. 首頁
  2. 問答
  3. 需要洞察力，瞭解這一小段HTML和Javascript

需要洞察力，瞭解這一小段HTML和Javascript

2011-12-28 69 views
3

我已經在my page上嵌入了LinkedIn Apply Now按鈕。但有幾件事讓我感到困惑。首先，當我右鍵點擊小部件時，我不能「另存爲」圖像。猜猜，因爲它不是一個圖像！這樣的按鈕是如何創建的？其次，當我右鍵單擊頁面並查看源代碼時，我看到的只是我寫的代碼。我認爲包含的in.js會將DOM元素附加到文檔中，以便使該按鈕可見。 （例如headElement.appendChild(document.createElement('img'))或類似的東西。怎麼回事？如果DOM樹中沒有嵌入任何東西，那麼按鈕是如何嵌入的？如果嵌入了某些東西，爲什麼它們在HTML源代碼中看不到？因爲當我通過某種東西使用Javascript，它出現在HTML源代碼以及需要洞察力，瞭解這一小段HTML和Javascript

最後但並非最不重要的，我怎麼能檢查是否是LinkedIn按鈕在iframe或通過自身的站在那裏

編輯：？我考察Chrome上的元素和我得到的是一堆span標籤。還有一個a標籤，href="javascript:void(0);。這是什麼意思？javascript:void(0)做？

我希望得到一些深刻洞察這是我非常新的前端開發，HTML和JavaScript和所有...

讚賞任何幫助。

來源

2011-12-28 Murat Derya Özen

回答

4

按鈕無非是一些嵌套span s，這是id之一= li_ui_li_gen_1325073350899_0-logo與CSS樣式有一個背景圖像多，指着http://static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png

注意，圖像包含其他的事情除了按鈕的背景。那是因爲他們使用了一種叫做CSS sprites的技術。

確實很多工作都是由in.js文件完成的。然而，如果你仔細查看代碼，你會發現它已經被縮小了，所以雖然（但根本不可能，它實際上是一個很好的練習）通過代碼。

最後，不，沒有iframe，只是一堆span s。

正如其他答案所述，您可以嘗試使用FF + Firebug或Chrome瀏覽文檔。

來源

2011-12-28 12:01:16 nico

2

真正查看linkedin代碼插入的html的最簡單方法是使用Safari或Chrome（或帶Firebug的Firefox）等瀏覽器，然後右鍵單擊該按鈕並選擇「檢查元素」。這會給你一個很好的DOM視圖和腳本實際上對你的文檔做了什麼。查看源文件默認情況下不會給你這個。

來源

2011-12-28 11:56:35 davidethell

2

你說得對，它不是圖像。它由幾個嵌套跨度和一個應用了各種CSS樣式的錨組成。 （CSS中可能包含背景圖片，但不能右鍵單擊以保存使用CSS設置的背景圖片。）

其次，View Source僅顯示由Web服務器發送的源。通過腳本進行的任何後續更改都不會反映出來。

您可以使用您選擇的瀏覽器中的開發人員工具（例如，Chrome內置了該工具，或者獲取Firebug for Firefox）查看當前的DOM，這也將回答您的上一個問題。在Chrome中，您可以右鍵單擊並選擇「檢查元素」以打開開發人員填充的元素，並預先選擇該元素。

編輯問題編輯：href="javascript:void(0);"這是什麼意思？

一個href有javascript: somecode將執行任何somecode而不是導航到一個像「正常」href網址。 void operator基本上評估關聯的表達式，然後返回undefined，因此void(0)不會執行任何操作。把一起，href="javascript:void(0);"基本上說「而不是瀏覽某個地方，什麼都不做」，但錨標記還有一個「正常的」錨在外觀方面的其他行爲，是一個製表位等。通常在那裏你看到這樣的設置還會有一個onclick事件處理程序和一些JavaScript來在用戶點擊錨時執行其他操作（可能涉及或不涉及導航）。

許多人認爲這是一種糟糕的做法，因爲如果用戶關閉JavaScript，錨標記根本不會做任何事情。通常離開href的URL相當於任何點擊事件處理程序的功能，儘管這通常是不太花哨的版本。然後，點擊處理程序將取消點擊的默認操作，以便不會發生到該網址的默認導航，而是發生其他事情（可能是Ajax調用）。這樣，大多數用戶會看到更好的行爲，但JavaScript禁用的用戶仍然可以使用該鏈接。

來源

2011-12-28 12:00:38 nnnnnn

相關問題

 相關問題