动态加载mapquest脚本的问题

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (6)

在ASP.NET Core应用程序中,我将Html模板和相应的Javascript存储在数据库中作为字符串(在两个单独的列中)。

Html模板scriptlink标签是模板的一部分。

<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是mapquest javascript的一部分,因此看起来在加载mapquest脚本之前调用了JavaScript模板。我查看了mapquest文档,但是他们使用的window.onload事件无处不在我的情况下

提问于
用户回答回答于

这不行。您无法通过转储HTML(来自AJAX)来向页面添加脚本。为了安全起见,浏览器会在将HTML插入DOM之前自动删除任何脚本标记。如果你想动态加载脚本,你必须手动完成它或者明确地使用一个库(这个基本只是与手动方法相同,有更多的花里胡哨)。

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

scriptSrc要加载的脚本的URL 在哪里?这个JS当然必须已经在页面上,否则你将进行无限递归,你需要加载这个脚本以便加载其他脚本等。

这些都不能与偏见完全一致。可能,您正在寻找一种方法,能够根据客户端发生的事情动态地删除页面上的库和所有支持HTML。如果是这种情况,你应该保持客户端,并在Vue,Angular,React等中创建一个组件。

扫码关注云+社区

领取腾讯云代金券