需要深入了解这一小段 HTML 和 Javascript答案

【问题标题】：Need insight on understanding this small piece of HTML and Javascript需要深入了解这一小段 HTML 和 Javascript
【发布时间】：2011-12-28 21:35:12
【问题描述】：

我在my page 上嵌入了LinkedIn 立即申请按钮。但是有几件事让我感到困惑。首先，当我右键单击小部件时，我无法“另存为”图像。猜猜因为它不是图像！这样的按钮是如何创建的？

其次，当我右键单击页面并查看源代码时，我看到的只是我编写的代码。我认为包含的in.js 会将DOM 元素附加到文档中，以使该按钮可见。（例如headElement.appendChild(document.createElement('img')) 或类似的东西。怎么会？如果没有任何东西嵌入到 DOM 树中，那个按钮是怎么存在的？如果嵌入了一些东西，那么为什么它们在 HTML 源代码中不可见？因为当我@ 987654324@ 使用 Javascript 的东西，它也出现在 HTML 源代码中。

最后但并非最不重要的一点是，我如何检查 LinkedIn 按钮是在 iframe 中还是单独存在？

编辑：我检查了 Chrome 上的元素，我得到的是一堆 span 标签。还有一个带有href="javascript:void(0); 的a 标签。那是什么意思？ javascript:void(0) 是做什么的？

我希望对此有深入的了解，因为我对前端开发、html 和 javascript 以及所有内容都很陌生...

任何帮助表示赞赏。

【问题讨论】：

标签： javascript html dom iframe linkedin

【解决方案1】：

按钮无非就是几个嵌套的spans，其中一个，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，只有一堆spans。

正如另一个答案所说，您可以尝试使用 FF+Firebug 或 Chrome 浏览文档。

【讨论】：

【解决方案2】：

真正查看由linkedin 代码插入的html 的最简单方法是使用Safari 或Chrome（或带有Firebug 的Firefox）之类的浏览器，然后右键单击按钮并选择Inspect Element。这将使您对 DOM 以及脚本对您的文档实际做了什么有一个很好的了解。默认情况下，查看源代码不会给你这个。

【讨论】：

【解决方案3】：

你是对的，这不是图像。它由几个嵌套的 span 和一个应用了各种 CSS 样式的锚组成。（CSS中可能包含背景图片，但不能右键保存用CSS设置的背景图片。）

其次，查看源代码仅显示 Web 服务器发送的源代码。通过脚本进行的任何后续更改都不会反映。

您可以使用您选择的浏览器中的开发人员工具（例如，Chrome 内置了它，或者为 Firefox 获取 Firebug）来查看当前的 DOM，这也将回答您的最后一个问题。在 Chrome 中，您可以右键单击并选择 Inspect Element 以打开预先选择该元素的开发人员资料。

编辑问题编辑：href="javascript:void(0);" 那应该是什么意思？

具有javascript: somecode 的href 将执行somecode 的任何内容，而不是像“普通”href 那样导航到一个url。 void operator 基本上评估关联的表达式，然后返回 undefined，所以 void(0) 不做任何事情。综上所述，@ 987654329@ 基本上说“不是在某处导航，什么都不做”，但锚标签在外观、作为制表符等方面仍然具有“正常”锚的其他行为。通常在你看到这样的地方当用户单击锚点时，还会有一个带有一些 JavaScript 的 onclick 事件处理程序来执行其他操作（可能涉及也可能不涉及导航）。

许多人认为这是一种不好的做法，因为如果用户关闭了 JavaScript，则锚标记根本不会做任何事情。通常最好将href 保留一个与单击事件处理程序相同的url，尽管通常是一个不太花哨的版本。然后单击处理程序将取消单击的默认操作，以便不会发生到该 url 的默认导航，而是会发生其他事情（可能是 Ajax 调用）。这样一来，大多数用户会看到更有趣的行为，但禁用 JavaScript 的用户仍然可以使用该链接。

【讨论】：

【解决方案4】：

我快速浏览了一下按钮，这里我说几点

使用 CSS 属性，如边框半径、渐变、边框顶部等来完成按钮
Image Sprites 用于按钮右侧的 linkdin 徽标：http://static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png
最后，就这个按钮的样式而言，我没有检测到任何 javascript

如果我错过了什么，请告诉我:)

【讨论】：