Необходимо отыскать заданный элемент в содержимом, загруженном в iframe.
Решение
Решаем задачу с помощью метода contents() (листинг 7.3.2).
Листинг7 .3 .2 . Использование метода contents()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-3-2</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css"> iframe {
border:1px dotted #00f;
}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("iframe").contents().find("h2").css("color","#f00");
});
});
</script>
</head>
<body>
<iframe src="test.htm" width="400" height="400"></iframe>
<button>Найти h2</button>
</body>
</html>
Обсуждение
HTML-код из листинга 7.3.2 — это элемент iframe, в который загружается содержимое файла test.htm. Кнопка Найти h2 служит для придания наглядности — при щелчке на ней будет выполняться код, с помощью которого мы намерены решить задачу.
Займемся JavaScript-кодом. Выбираем элемент button, с которым необходимо связать функцию-обработчик события click. Самое интересное для нас заключено внутри функции. Естественно, что сначала нужно найти сам элемент iframe, что мы и делаем, указывая в селекторе соответствующее выражение. Применяем метод contents() и получаем таким образом содержимое, загруженное в элемент iframe. Это содержимое является обычным набором элементов, к которому мы уже привыкли, и даже знаем, что для поиска в наборе пригодится метод find(). Мы им и воспользуемся, передав в аргументе выражение "h2". И, наконец, получив этот элемент, с помощью метода css(), заставим цвет шрифта тега <h2> сделаться красным.
Осталось только нажать кнопку Найти h2, чтобы убедиться, что так и произойдет.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
- Выделение текста на странице (0)
- Создание галереи миниатюр (0)