使用外部脚本结果填充本地 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>

所以它应该在 div 中找到带有“deadScriptContainer”类的脚本标签，并查找它的 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);
        }
    }
});