Question

所以我有以下HTML代码：

<div> 
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script> 
<script type="text/javascript"> xMinicart("style=","layout=Mini"); </script> 
</div>

请查看浏览器中运行的实际代码。它显示了一个链接。

我想使用以下代码将链接添加到导航栏：

<script>
window.onload=function(){
 $('nav ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');
}
</script>

但我没有设法正确添加附加代码。如何引用js源并在追加代码中调用xMinicart函数？

非常感谢！

超级重要更新！

几乎就在那里！以下javascript代码在jsfiddle中工作，但它在squarespace中不起作用。我不确定为什么。

$('nav ul').append('<li id="hello">test</li>');

$.getScript("https://app.ecwid.com/script.js?4549118", function(){
    xMinicart("style=","layout=Mini","id=hello");
});

您可以在此处看到它：http://jsfiddle.net/u3NKD/8/

Answer 1

我认为你想使用jQuery的getScript函数

https://api.jquery.com/jQuery.getScript/

因此，您将加载URL，然后使用回调来执行代码

<script>
var url = "https://app.ecwid.com/script.js?4549118";
$.getScript( url, function() {
   var s = document.createElement('script');
   s.innerText = 'xMinicart("style=","layout=Mini");'
   $('nav ul').append(s);       
});
</script>

Answer 2

尝试这个而不是我的其他答案，这是我试过的JSFiddle

http://jsfiddle.net/W2pQA/1

<script>
$(function(){
    $('ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');

    var url = "https://app.ecwid.com/script.js?4549118";

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;

    var s = document.createElement('script');
    s.innerText = 'xMinicart("style=","layout=Mini");'
    $('ul').append(script).append(s);  
});
</script>

Answer 3

可能是您尝试执行的JS尝试在外部JS文件完成加载之前运行。

我修改了你最新的JSFiddle以等待加载外部文件，然后在完成后执行xMiniCart代码：

http://jsfiddle.net/u3NKD/9/

$('nav ul').append('<li id="hello">test</li>');

var script = $.getScript("https://app.ecwid.com/script.js?4549118");
$.when(script).then(function(){
   xMinicart("style=","layout=Mini","id=hello"); 
});

以上是$.when代码的一些文档：

https://api.jquery.com/jQuery.when/

如何将这个HTML代码添加到追加代码中

3 个答案: