修改

Question

主页面是.aspx文件。我正在尝试生成一个弹出窗口。当用户点击发送电子邮件时，页面上的javascript会调用openEmailPopup功能，如下所示。

function openEmailPopup(taskId, popupElementName, gridElementName) {
 $("#" + popupElementName).dialog({
    width: 1300,
    height: 500,
    draggable: false,
    resizable: false,
    modal: true,
    open: function () {
        $.get("/Resources/Sendmail", function (data) {
            $('#masterPvlEmailGrid').html(data);
        });

      //more code here...
    }
  });
}

问题是SendEmail.cshtml文件取决于某些javascript文件。

<script language="javascript" src="../../Scripts/file1.js"></script>
<script language="javascript" src="../../Scripts/file2.js"></script>
<script language="javascript" src="../../Scripts/file3.js"></script>

<script language="javascript">
  var sendEmailViewModel = new SendEmailViewModel();
  var seUploadFilesViewModel = new UploadFilesViewModel();

   $(function () {
      sendEmailViewModel.Init();
    });
</script>

当返回ajax调用的响应时，javascript以上的响应不会执行。有两种解决方案。要么我在.aspx页面上添加了javascript参考。但是，要做到这一点，我还需要在母版页中添加内容占位符元素。最大的问题是实际的aspx文件有一个嵌套在其他母版页中2倍深的母版页。

许多人依赖这些母版页，我想在触摸它们之前确保有解决方案。

如何动态加载和执行这些javascript文件？我做了一些研究但是，我仍然不明白它如何与jquery一起工作。

有什么想法吗？

修改

这就是我调用这些文件的方式。

$.getScript("/Scripts/file1.js", function () {
 });
$.getScript("/Scripts/file2.js", function () {
 });
$.getScript("/Scripts/file3.js", function () {
 });

当我查看Google工具时，我看到所有正在加载的文件。

Answer 1

你可以使用jQuery的getScript方法，它允许你通过HTTP加载javascript然后执行它：

http://api.jquery.com/jquery.getscript/

Answer 2

你可能想看一下类似于RequireJS的AMD（http://requirejs.org/）。 RequireJS旨在根据需要加载JavaScript资源，因此您无需在主页面中加载它们。在您的示例中，可以为弹出窗体异步返回所有三个文件。

Answer 3

我不确定这是否能解决您的问题因为我现在无法测试。你可以尝试一下吗？

function openEmailPopup(taskId, popupElementName, gridElementName) {
    $("#" + popupElementName).dialog({
        width: 1300,
        height: 500,
        draggable: false,
        resizable: false,
        modal: true,
        open: function() {

            var deferreds = [];

            //Store a deferred into the array
            function addDeferred(url) {
                deferreds.push(
                    $.getScript(url)
                    .done(function() {
                        console.log("Module loaded: " + url);
                    })
                    .fail(function(ex) {
                        console.error(ex);
                    })
                );
            };

            //Call the scripts
            addDeferred("/Scripts/file1.js");
            addDeferred("/Scripts/file2.js");
            addDeferred("/Scripts/file3.js");


            //When all the scripts has been loaded....
            $.when.apply($, deferreds)
                .done(function() {
                    $.get("/Resources/Sendmail", function(data) {
                        $('#masterPvlEmailGrid').html(data);
                    });
                })
                .fail(function(ex) {
                    console.log(ex);
                });

            //more code here...
        }
    });
}

如何动态加载JavaScript代码

修改

3 个答案: