Передача переменной через атрибут html 5 в Javascript
Опубликовано: 01.09.2018
В процессе разработке сайтов часто появляется потребность передать какое-либо значение (переменную, массив) в javascript,в таких случаях обычно советуют что то вроде
<script> var variable = <?php $variable ;?> alert(variable); <script>
Javascript записанный инлайном вызывает смешанные чувства.
Во первых это почти всегда не по кодстайлу.
Во вторых трудно отлаживать.
В третьих Такой код не кушируется браузером.
Внимание дорогой читатель пример выше неправильный более чем полностью , о чем предупреждаю сразу и это как раз то как делать не нужно, а вот о том как правильно вдумчиво и внимательно можно прочитать ниже .
Переменные в самом CSS. Переменные урок CSS3.
Но если вы к примеру не человек высоких моральными принципов, можете смело копировать и делать с этим вообще что угодно, я вам этого не советовал и более того даже отговаривал.
Я убежден что javascript должен храниться исключительно в файлах,
html дабы обеспечить нормальное кеширование браузерами, и облегчить поиск этого самого скрипта в своем проекте.Но как же передать значение из php и при этом сохранить красивый код?
Ответ использовать eval() в Javascript.
Рассмотрим пример с подключенимм google maps.
Для начала подключим google maps (библиотеку)
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCdrLjcwRWoPkHw8bTvGD2gtNCn_6brs0w&sensor=true&language=ru'></script>инициализируем начало отрисовки карт сразу после загрузки DOM
var $ = jQuery.noConflict(); $(document).ready(function () { if ($('#map-canvas').length) { function initialize() { var place = eval($("#map-canvas").attr('data-place')); var pos = new google.maps.LatLng(place[0], place[1]); var mapOptions = { center: pos, zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, scrollwheel: false, rotateControl: true }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); map.setTilt(45); var marker = new google.maps.Marker({ position: pos, map: map }); } google.maps.event.addDomListener(window, 'load', initialize); } });Создадим необходимые элементы html
<div id="map-canvas" data-place="[61.784625, 34.350755]"></div>Объяснение этой уличной магии
в js нас интересует строка :
var place = eval($("#map-canvas").attr('data-place'));здесь
$("#map-canvas").attr('data-place')Получает атрибут data-place элемента с id map-canvas после чего eval() преобразует строку [61.784625, 34.350755] в js код , конкретней в массив т.к. присутствуют квадратные скобки.
По спецификации HTML5 ,браузеры пропускают атрибуты тегов начинающихся с data- влиять на отрисовку этот атрибут не будет, но его значение можно использовать в javascript.
Код html можно модифицировать:
<div id="map-canvas" data-place="<?php echo '[61.784625, 34.350755]' ;?>"></div>с использованием php , так простыми средствами можно передавать целые массивы переменных из php в js не используя инлайнового написания : )