Нужно понимание понимания этого небольшого фрагмента HTML и Javascript - PullRequest
3 голосов
/ 28 декабря 2011

Я добавил кнопку LinkedIn Apply Now на моей странице .Но есть несколько вещей, которые меня смущают.Прежде всего, когда я щелкаю правой кнопкой мыши виджет, я не могу «сохранить как» изображение.Угадай, потому что это не изображение!Как создается такая кнопка?

Во-вторых, когда я щелкаю правой кнопкой мыши страницу и просматриваю исходный код, все, что я вижу, - это код, который я написал.Я думал, что in.js, который включен, добавит элементы DOM к документу, чтобы сделать эту кнопку видимой.(например, headElement.appendChild(document.createElement('img')) или что-то в этом роде. Почему? Если в дерево DOM ничего не встроено, как там эта кнопка? Если что-то встроено, то почему они не видны в исходном коде HTML? Потому что, когда я headElement.appendChild что-то с помощью Javascript, оно также появляется в исходном коде HTML.

И последнее, но не менее важное: как я могу проверить, находится ли эта кнопка LinkedIn в iframe или сама по себе?

РЕДАКТИРОВАТЬ: Я проверил элемент в Chrome, и я получил набор span тегов. Есть также тег a с href="javascript:void(0);. Что это должно означать?javascript:void(0) do?

Буду признателен за глубокое понимание этого, так как я довольно новичок в разработке фронт-эндов, html и javascript и все ...

Любая помощь приветствуется.

Ответы [ 4 ]

4 голосов
/ 28 декабря 2011

Кнопка - не что иное, как несколько вложенных span с, один из которых с id = li_ui_li_gen_1325073350899_0-logo стилизован с помощью CSS для создания фонового изображения, указывающего на http://static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png

Обратите внимание, что это изображение содержит другие вещи, кроме фона кнопки. Это потому, что они используют технику под названием CSS спрайты .

Действительно, большая часть работы выполняется файлом in.js. Однако, если вы посмотрите код, вы увидите, что он был минимизирован, поэтому немного (но вовсе не невозможно, на самом деле это хорошее упражнение) пройти код.

Наконец, нет, iframe нет, просто группа span с.

Как говорится в другом ответе, вы можете попробовать использовать FF + Firebug или Chrome для изучения документа.

2 голосов
/ 28 декабря 2011

Вы правы, это не изображение. Он состоит из нескольких вложенных диапазонов и якоря с различными стилями CSS. (Где-то в CSS может быть фоновое изображение, но вы не можете щелкнуть правой кнопкой мыши, чтобы сохранить фоновые изображения, установленные с помощью CSS.)

Во-вторых, View Source показывает только источник, отправленный веб-сервером. Любые последующие изменения, сделанные с помощью скрипта, не будут отражены.

Вы можете использовать инструменты разработчика из браузера по вашему выбору (например, в Chrome он встроен или получить Firebug for Firefox) для просмотра текущего DOM, который также ответит на ваш последний вопрос. В Chrome вы можете щелкнуть правой кнопкой мыши и выбрать Inspect Element, чтобы открыть материал для разработчиков с предварительно выбранным элементом.

РЕДАКТИРОВАТЬ для вопроса edit: href="javascript:void(0);" Что это должно означать?

href, который имеет javascript: somecode, будет выполнять все, что somecode вместо перехода к URL-адресу, как для "обычного" href. Оператор void в основном вычисляет связанное выражение, а затем возвращает неопределенное значение, поэтому void(0) ничего не делает. Собирая это вместе, href="javascript:void(0);" в основном говорит «вместо навигации куда-то, ничего не делайте», но тег привязки по-прежнему имеет другое поведение «нормального» якоря с точки зрения внешнего вида, табуляции и т. Д. Обычно там, где вы видите такое установка также будет иметь обработчик событий onclick с некоторым JavaScript, чтобы делать что-то еще (что может включать или не включать навигацию), когда пользователь нажимает на якорь.

Многие считают это плохой практикой, потому что если у пользователя отключен JavaScript, тег привязки ничего не сделает. Обычно лучше оставить href с URL-адресом, который эквивалентен тому, что делает обработчик события click, хотя обычно это менее причудливая версия. Затем обработчик клика отменит действие по умолчанию для клика, так что переход по умолчанию к этому URL-адресу не произойдет, и вместо этого произойдет что-то еще (возможно, вызов Ajax). Таким образом, большинство пользователей увидят причудливое поведение, но пользователи с отключенным JavaScript все еще могут использовать ссылку.

2 голосов
/ 28 декабря 2011

Самый простой способ действительно увидеть HTML, который был вставлен кодом linkedin, - это использовать браузер, такой как Safari или Chrome (или Firefox с Firebug), и щелкнуть правой кнопкой мыши по кнопке и выбрать Inspect Element.Это даст вам хорошее представление о DOM и о том, что скрипт фактически сделал с вашим документом.View Source не дает вам этого по умолчанию.

1 голос
/ 28 декабря 2011

Я быстро посмотрел на кнопку, здесь у меня есть несколько точек

  1. Использование CSS-свойств, таких как радиусы, градиенты, границы и т. Д., Чтобы придать конец кнопке

  2. Спрайты изображений используются для логотипа ссылки в правой части кнопки: http://static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png

  3. Наконец, я не обнаружил ни одного JavaScript, поскольку стиль этой кнопки

Если я что-то пропустил, просто дайте мне знать :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...