Проблема с динамической загрузкой скрипта mapquest - PullRequest
Новая
       43

Проблема с динамической загрузкой скрипта mapquest

0 голосов
/ 09 июля 2019

В приложении ASP.NET Core у меня есть Html-шаблон и соответствующий Javascript, хранящийся в базе данных в виде строки (в двух отдельных столбцах).

Шаблон HTML Теги script и link являются частью шаблона. 

<script type='text/javascript' src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css" />

<div id="mapcontainer" name="mapcontainer"> 
    <div id="map" name="map" style="width: 100%;height: 700px;"/>
</div>

Шаблон JavaScript 

$(function(){
        var mapdiv = $("#map")[0]; // get dom element

        var geoJsonData = {
            "type": "Feature",
            "geometry": {"type":"MultiPolygon","coordinates":[[[[xxx,xxx],[xxx,xxx],[xxx,xxx],[xxx,xxx],[xxx,xxx]]]]}
        };

        console.log(geoJsonData);

        var boundary;

        L.mapquest.key = 'KEY';

        var myRenderer = L.canvas({ padding: 0.5 });

        var map = L.mapquest.map(mapdiv, {
            center: [35, -84],
            layers: L.mapquest.tileLayer('hybrid'),
            zoom: 4,
            renderer: myRenderer
        });

        if (boundary) {
            map.removeLayer(boundary);
        }

        var myStyle = {
            color: "blue",
            opacity: 1,
            fillColor: "blue",
            fillOpacity: .1
        };

        boundary = L.geoJSON(geoJsonData, { style: myStyle }).addTo(map);
        map.fitBounds(boundary.getBounds());

})

Частичное представление , которое записывает html и javascripts. (обратите внимание, что шаблон JavaScript написан после HTML) 

@model RenderModel

@Html.Raw(Model.Html)

<script type="text/javascript">
    @Html.Raw(Model.Js)
</script>

Метод действия, который возвращает частичное представление 

    public IActionResult Render()
    {
        var result = service.GetFromDataBase();
        var renderModel = new RenderModel()
        {
            Html = result.HtmlString;
            Js = model.JsString;
        };

        return PartialView("_RenderedOutput", renderModel);
    }

На стороне клиента, когда пользователь нажимает какую-то кнопку, я загружаю это частичное представление, используя ajax 

 $("#btn").click(function(){
    $.get("/render",function(data){
       $("#someDiv").html(data);
    })
 })

ВЫПУСК

при частичном просмотре я вижу ошибку в консоли 

VM555:16 Uncaught ReferenceError: L is not defined
    at <anonymous>:16:13
    at b (jquery.min.js:2)
    at Ie (jquery.min.js:2)
    at k.fn.init.append (jquery.min.js:2)
    at k.fn.init.<anonymous> (jquery.min.js:2)
    at _ (jquery.min.js:2)
    at k.fn.init.html (jquery.min.js:2)
    at Object.onDone (main.js:66)
    at Object.<anonymous> (wmp.utils.js?v=oqExPOG9vQY_CyC9Di4pALnwKwtHyRC287LMRejP6Hw:167)
    at c (jquery.min.js:2)

переменная L является частью javascript mapquest, поэтому похоже, что шаблон JavaScript вызывается до загрузки скрипта mapquest. Я посмотрел документацию к mapquest, но везде они используют событие window.onload, которое не будет работать в моем случае

1 Ответ

0 голосов
/ 09 июля 2019

Это не сработает.Вы не можете добавлять скрипты на страницу через дамп HTML (поступающий из AJAX или нет).В целях безопасности браузер автоматически удаляет все теги сценария перед вставкой HTML в DOM.Если вы хотите динамически загружать скрипты, вам придется делать это вручную или использовать библиотеку специально для этой цели (базовая функция аналогична ручному подходу с большим количеством наворотов). 

var script = document.createElement('script');
script.src = scriptSrc;
document.head.appendChild(script);

Где scriptSrc будет URL-адрес скрипта, который вы хотите загрузить.Этот JS, конечно, должен быть уже на странице, иначе вы находитесь в бесконечной рекурсии, где вам нужно что-то для загрузки этого скрипта, чтобы вы могли загрузить другой скрипт и т. Д.

Ничего из этого действительно не работаетвсе это хорошо с частями.Скорее всего, вы ищете способ, позволяющий динамически удалять библиотеку и весь поддерживающий HTML на странице на основе того, что происходит на стороне клиента.Если это так, вы должны оставаться на стороне клиента и создать компонент в чем-то вроде Vue, Angular, React и т. Д.

...