Question

我正在尝试在开源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);

如果您有任何想法？

Answer 1

您必须转义脚本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);
});

Answer 2

您应该使用$.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);
    });
});

Answer 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>

通过代码添加外部JS脚本

3 个答案: