通过代码添加外部JS脚本答案

【问题标题】：Add external JS script through code通过代码添加外部JS脚本
【发布时间】：2016-07-08 16:41:24
【问题描述】：

我正在尝试在开源 CRM 的源代码中实现来自“Awesome Table”的地图小部件。

我要添加的代码是

 <div data-type="AwesomeTableView" data-viewID="-KLtnY5OHJPgnEOX1bKf"></div>
 <script type="text/javascript" src="https://awesome-table.com/AwesomeTableInclude.js"></script>

我尝试用 jQuery 来做这样的事情：

$(document).ready(function () {
    var div = "<div data-type=\"AwesomeTableView\" data-viewID=\"-KLtnY5OHJPgnEOX1bKf\"></div>";
    var scr = "<script type=\"text/javascript\" src=\"https://awesome-table.com/AwesomeTableInclude.js\"></script>";
    $("body").append(div, scr);
});

但我遇到了一个问题：在控制台中，src 如下所示：

http://127.0.0.1/edsa-EspoCRM-4.1.6/api/v1/https://awesome-table.com/AwesomeTableInclude.js

看看有什么问题...

在我尝试使用 javascript 之前，但我得到了几乎相同的结果（什么都没有出现并且脚本没有工作）

var div = document.createElement("div");
div.id = "lacarte";
div.dataset.type = "AwesomeTableView";
div.dataset.viewid = "-KLtnY5OHJPgnEOX1bKf";
div.style.height = "200px";

var scr = document.createElement("script");
scr.type = "text/javascript";
scr.src = "https://awesome-table.com/AwesomeTableInclude.js";
var page = document.getElementById("content");
page.appendChild(div);
page.appendChild(scr);

如果你有任何想法？

【问题讨论】：

您是否尝试过$.getScript 加载并执行您的JS 脚本而不是附加它？ (api.jquery.com/jQuery.getScript)
在我的情况下如何使用它？
查看我发布的答案。
您使用的 CRM 是什么？
如我所见，您试图在他们的论坛上找到一些帮助来制作您的扩展程序 (forum.espocrm.com/forum/developer-help/…)。您是否尝试将来自 AwesomeTable 的 JS 文件包含在您的扩展文件夹中？（例如client/custom/src/views/my-entity/）

标签： javascript jquery html src

【解决方案1】：

您应该使用$.getScript 动态加载和执行脚本。

如果你的脚本是你div的先决条件，你可以使用脚本加载结束时执行的callback来追加div。

这是文档：http://api.jquery.com/jQuery.getScript/

$(document).ready(function () {
    $.getScript("https://awesome-table.com/AwesomeTableInclude.js", function (data, textStatus, jqxhr) {
        var div = '<div data-type="AwesomeTableView" data-viewID="-KLtnY5OHJPgnEOX1bKf"></div>';
        $("body").append(div);
    });
});

【讨论】：

【解决方案2】：

您必须转义脚本src、type 中的斜线并关闭脚本/：

$(document).ready(function () {
    var div = '<div data-type="AwesomeTableView" data-viewID="-KLtnY5OHJPgnEOX1bKf"></div>';
    var scr = '<script type="text\/javascript" src="https:\/\/awesome-table.com\/AwesomeTableInclude.js"><\/script>';
    $("body").append(div, scr);
});

【讨论】：

为什么要转义结束标签的斜线而不是 src 属性中的斜线？
另外转义斜杠是没用的，它不是像反斜杠这样的特殊字符......（如果你想“正确”，你错过了src 和type 属性中的一些其他斜杠")
是的，结果相同：/

【解决方案3】：

以下代码完全如图所示添加了两个元素。

function byId(id){return document.getElementById(id);}
function newEl(tag){return document.createElement(tag);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	var div = newEl('div');
	div.setAttribute('data-type', 'AwesomeTableView');
	div.setAttribute('data-viewID', '-KLtnY5OHJPgnEOX1bKf');

	var script = newEl('script');
	script.setAttribute('type', 'text/javascript');
	script.setAttribute('src', 'https://awesome-table.com/AwesomeTableInclude.js');

	document.body.appendChild(div);
	document.body.appendChild(script);
}

结果源是：https://awesome-table.com/AwesomeTableInclude.js 如此处所示：

<body>
<div data-type="AwesomeTableView" data-viewid="-KLtnY5OHJPgnEOX1bKf"></div><script type="text/javascript" src="https://awesome-table.com/AwesomeTableInclude.js"></script>
</body>

【讨论】：

我刚刚尝试过，但我的页面上没有出现任何内容：O 但我没有收到错误
你试过查看 js 文件的来源吗？它做的第一件事就是为 DOMContentLoaded 添加一个事件监听器。因此，如果您像我的代码那样运行代码以在 onload 事件中添加脚本，那么它完成得太晚了。该脚本不会运行，因为它等待的事件已经发生..