У меня есть страница, содержащая серию таких тегов

 <a class="IMG" href="#" onclick="openWin(this,'./photos/Snapshot_20100803.jpg');return false;"><img src="./photos/TN_Snapshot_20100803.jpg" alt="./photos/TN_Snapshot_20100803.jpg"/></a> 

OpenWin создает окно и отображает изображение при нажатии большого пальца. Эта страница также содержит кнопку «Далее», которая вызывает функцию nextImage в скрипте родительской страницы. nextImage просматривает теги IMG класса и находит следующий тег с классом IMG. Но теперь я застрял. Я нашел нужный тег и поместил его в var z. Я могу получить что-нибудь аля

cmd = z.onclick;

Если я показываю cmd с предупреждением (cmd), я вижу что-то вроде этого

Функция onclick (событие) {openWin (это, "./photos/Snapshot_20100804.jpg"); вернуть ложь; }

Но я не знаю, что у меня есть. Кажется, я не могу манипулировать им, как если бы это строка с использованием indexOf.

На что я пригляделся?

Как я могу управлять им как строкой?

Есть ли способ определить функцию, возможно, используя eval (), и выполнить ее в контексте тега на странице, содержащей тег a?

Что я действительно хочу сделать, так это нажать на тег, который я нашел на странице.

0
Mike D 6 Сен 2010 в 17:16

2 ответа

Лучший ответ

В z вы нашли экземпляр HTMLElement для элемента a. Когда вы смотрите на его свойство onclick (которое является отражением его атрибута onclick), вы получаете экземпляр Function. toString экземпляра Function почти во всех реализациях возвращает строку, содержащую декомпилированную версию функции. Однако это нестандартное поведение и категорически запрещено в новом «строгом» режиме последней спецификации JavaScript. В любом случае декомпиляция обработчика - это не то, как вы хотите решить эту проблему. :-)

Если вы можете изменить HTML, я бы рекомендовал кодировать целевое изображение как атрибут данных, например:

<a class="IMG" href="#" data-img='./photos/Snapshot_20100803.jpg' onclick="openWin(this,this.getAttribute('data-img'));return false;"><img src="./photos/TN_Snapshot_20100803.jpg" alt="./photos/TN_Snapshot_20100803.jpg"/></a>

Затем, работая со следующей функцией, вы можете просто найти следующий элемент a (я назову его nextLink) и сделайте следующее:

openWin(nextLink, nextLink.getAttribute('data-img'));

Еще лучше, пусть функция openWin считывает сам атрибут data-img, чтобы HTML-код мог быть просто:

<a class="IMG" href="#" data-img='./photos/Snapshot_20100803.jpg' onclick="openWin(this);return false;"><img src="./photos/TN_Snapshot_20100803.jpg" alt="./photos/TN_Snapshot_20100803.jpg"/></a>

... и призыв открыть следующий на nextLink просто:

openWin(nextLink);

Немного укорачивает страницу, избавляя от необходимости повторять все эти this.getAttribute('data-img') биты.

Пользовательские атрибуты с префиксом data- действительны с HTML5, и теперь они работают со всеми браузерами, даже с более ранними типами документов (просто технически они недействительны в более ранних типах документов; я не знаю ни одного браузера, который заботы).

Немного не по теме, если вам разрешено вносить более серьезные изменения, вы можете полностью отказаться от onclick в тегах a и вместо этого использовать всплытие событий, подключив событие click для какой бы контейнер ни содержал все эти элементы a. Это связано с тем, что, если он не отменен, щелчок перемещается вверх по дереву (от дочернего элемента к родительскому) до тех пор, пока он не будет обработан, и вы можете выяснить, посмотрев на объект события, какой дочерний элемент был фактически нажат (чтобы получить его атрибут data-img.) Если вы можете / хотите представить такую библиотеку, как jQuery, Прототип, Закрытие и т. д., они могут заметно упростить это.

2
T.J. Crowder 6 Сен 2010 в 13:37

Если у вас что-то вроде этого:

var z = 'function onclick(event) { openWin(this,"./photos/Snapshot_20100804.jpg"); return false; }'

Вы можете легко сделать это, чтобы выполнить строку, содержащуюся в z:

var cmd = "("+z+")();"
eval(cmd);

Вы можете протестировать его ЗДЕСЬ.

0
Cipi 6 Сен 2010 в 13:29