javascript - 使用外部脚本结果填充本地 div

Question

我在一个网站上使用 Angular 和 JQuery，并将页眉和页脚设置为部分，以便最大限度地重复使用。我遇到的问题是我需要在加载时在页脚中处理一些 javascript，但 Angular 不支持通过 ng-include使用 $.load() 标记或 JQuery方法。

我有多个想要运行的第 3 方脚本，但我现在正在处理的是 Verisign 脚本之一，它返回一个图像，该图像是使用 <script src=""></script> 加载的图案。我知道至少目前 Javascript 没有办法引入外部脚本，所以我的想法是简单地创建一个容器 div，我希望图像出现，从主页运行第 3 方脚本，然后获取该内容并通过引用填充容器 div，概念上看起来像这样:

//footer.html
<div id="siteVerify"></div>

//index.html
//call a method that takes 3rd party that i can point to siteVerify

是否可以将第 3 方脚本指向 siteVerify div 而无需在 div 中运行脚本？

相反，是否有一种替代的首选方法可以重用 html 代码，以便我可以简单地在一个地方编辑更改并让它们在整个站点中传播？

编辑:

我输入:

// If you know these dead scripts will be in a certain container, refine your jQuery selector
$(document).ready(function(){

// If you know these dead scripts will be in a certain container, refine your jQuery selector
    $('.deadScriptContainer script').each(function(){
        // If a script has content, we want to execute it
        if($(this).html().length > 0){
            // Eval() will execute any JavaScript it is passed
            eval($(this).html());
        }else{
            // If this script has no content, let's see if it has a src
            if($(this).src){
                // Create a new script tag
                var newScript = document.createElement("script");
                newScript.type = "text/javascript";
                newScript.src = $(this).src;
                // Append new script to the head
                document.querySelector("head").appendChild(newScript);
            }
        }
    });
});

到一个js文件中，并在我的index.html文件的底部调用它。同时在我的页脚中，我有这样的东西:

<div class='deadScriptContainer'><span id='siteseal'>
    <script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=...."></script></span>
</div>

所以它应该在类为“deadScriptContainer”的 div 中找到脚本标签，并查找它的 src，它应该是 https:.... 我在代码中放了一个警报，它确实看起来是找到脚本标签，但是当我检查 src 值是什么时，它总是返回“未定义”。

我感觉我的选择器可能是错误的，但我看不出它们是什么。

Answer 1

当您使用 AJAX 加载脚本标签时，问题是它们被作为 放置 放置在您想要的位置，因此它没有触发。不过，有一种简单的方法可以恢复这些死脚本，所以您很幸运!

从 AJAX 请求返回数据后，评估任何内部 JavaScript。

对于外部 JavaScript，您需要做的是创建一个新的 <script>标记并给它死脚本的源。

加载新数据后，整个过程应该如下所示:

// If you know these dead scripts will be in a certain container, refine your jQuery selector
$('deadScriptContainer script').each(function(){
    // If a script has content, we want to execute it
    if($(this).html().length > 0){
        // Eval() will execute any JavaScript it is passed
        eval($(this).html());
    }else{
        // If this script has no content, let's see if it has a src
        if($(this).src){
            // Create a new script tag
            var newScript = document.createElement("script");
            newScript.type = "text/javascript";
            newScript.src = $(this).src;
            // Append new script to the head
            document.querySelector("head").appendChild(newScript);
        }
    }
});