Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вставить в див - js-код яндекс карты (https://javascript.ru/forum/dom-window/69104-vstavit-v-div-js-kod-yandeks-karty.html)

rodiony4 29.05.2017 23:08
Вставить в див - js-код яндекс карты
 
Здравствуйте
Нужно по клику по ссылке, вставить в див - js-код яндекс карты
Так не получилось, пожалуйста, помогите
<script type="text/javascript">
zzz = '<script charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=vcnFFhOJuYXv6CT5peVIb3cADSfa6GLS&amp;width=600&amp;height=450&amp;lang=ru_RU&amp;sourceType=constructor" type="text/javascript"></script>';
$( "#cap_map" ).click(function() {
		$('.cap_site_map').html(zzz);
});
</script>


<span id="cap_map">показать</span>
<div class="cap_site_map"></div>

j0hnik 29.05.2017 23:17 
<head>
	<meta charset="utf-8">
</head>
<body>
	<span id="cap_map">показать</span>
	<div class="cap_site_map"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		var zzz = '<script charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=vcnFFhOJuYXv6CT5peVIb3cADSfa6GLS&amp;width=600&amp;height=450&amp;lang=ru_RU&amp;sourceType=constructor" type="text/javascript"><\/script>';
		$( "#cap_map" ).click(function() {
		$('.cap_site_map').html(zzz);
	});
</script>
</body>

рони 29.05.2017 23:26
rodiony4,
в документации наверняка есть, более корректные примеры ... но можно так
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$( "#cap_map" ).click(function() {
    var s = $("<script\>")
    $('.cap_site_map').empty().append(s);
    s.attr({src: "https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=vcnFFhOJuYXv6CT5peVIb3cADSfa6GLS&amp;width=600&amp;height=450&amp;lang=ru_RU&amp;sourceType=constructor"})
});
});
  </script>
</head>

<body>
<span id="cap_map">показать</span>
<div class="cap_site_map"></div>
</body>
</html>

j0hnik 29.05.2017 23:40
Мой саблайм вот на это просто ругался.
constructor" type="text/javascript"></script>

rodiony4 30.05.2017 00:00
j0hnik, рони, у меня старая библиотека jquery-1.6 и использовать более новую пока не могу (джумла, и многие компоненты, плагины и модули заточены на старую библиотеку)
Есть вариант для jquery-1.6? со старой jquery-1.6 ваш js не выполняется

рони 30.05.2017 00:32
Цитата:
Сообщение от rodiony4
Есть вариант для jquery-1.6?
:-? проще без jquery совсем, но если хочется ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  <script>
$(function() {
$( "#cap_map" ).one("click",function() {
    var s = document.createElement("script");
    $('.cap_site_map')[0].appendChild(s);
    s.src= "https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=vcnFFhOJuYXv6CT5peVIb3cADSfa6GLS&amp;width=600&amp;height=450&amp;lang=ru_RU&amp;sourceType=constructor"

});
});
  </script>
</head>

<body>
<span id="cap_map">показать</span>
<div class="cap_site_map"></div>
</body>
</html>

rodiony4 30.05.2017 00:47
рони, спасибо! теперь js выполняется, увидел ваш добавленный .one, но наверное можно и так - перед вставкой очищать див - .empty()


Часовой пояс GMT +3, время: 23:39.