如何让浏览器运行dom操作注入的javascript代码？

Question

我想提供一个其他页面可以包含的小 html 片段。

html 内容如下所示：

<div id="coolIncludable" style="display:none"> <!--be invisible until you are finished initializing -->
   <div>Cool stuff here</div>
   <div>More cool stuff and so on...</div>
</div>
<script src="http://somehwere/jquery.js"></script>
<script src="http://somewhere/something.js"></script>
<script>
    $(function(){$('#coolIncludable').show();});//<- actually contained in a script file, just for illustration
</script>

我打算使用此处详述的方法： https : //www.w3schools.com/howto/howto_html_include.asp进行实际包含。 假设页面看起来像这样：

<html>
    <head>
    </head>
    <body>
        <H1>Content before snippet</H1>
        <div id="registerWrapper" html-include="http://somehwere/snippet.html">
            No content loaded
        </div>
        <H1>Content after snippet</H1>
        <script type="text/javascript" src="http://somehwere/html-include.js"></script>
    </body>
</html>

html 片段被加载和嵌入，但它附带的 javascript 永远不会被执行。 有没有办法嵌入内容，包括确保它们被执行的脚本？

更新我应该明确表示我不希望控制嵌入页面，所以我不能依赖它加载了 jQuery 或其他任何东西。 因此，我避免在嵌入函数中使用 jQuery，并将自己限制在纯 Javascript 中。 加载 jQuery 是代码片段末尾的标签要做的事情之一。

Answer 1

由于您使用的是 jQuery，您可以使用它内置的load()方法来执行您想要的操作

就像是：

HTML

<div class="include" data-include="page2.html"></div>

JS

$('.include').each(function(){
     const $el = $(this), url = $el.data('include');
     $el.load(url)
});

然后确保新内容的脚本标记位于该内容下方。

简单的工作演示

Answer 2

回想起来，我的错误非常明显：

行$(function(){$('#coolIncludable').show();}); 做？ 它是否执行$('#coolIncludable').show(); ? 不，它没有。 它注册一个回调，以便由 'load' 事件触发，该事件已经触发，并且不会再次触发。

另一方面，这确实是一个有争议的问题，因为代码甚至从未被执行过。

这是我学到的有关 javascript 动态加载的知识

直接注入脚本标签不起作用

• 通过设置 element.innerHtml 注入的脚本标签不会被执行

<div id="snippet">
    ...
</div>
<!-- neither of these will be executed -->
<script type="text/javascript">alert("stuff");</script> 
<script type="text/javascript" src="http://somewhere/script.js"></script>

动态创建脚本标签确实有效

有效的是动态标记生成，如本文所述： JavaScript Madness: Dynamic Sc​​ript Loading

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'helper.js';
head.appendChild(script);
//At this point (or soon after) the code in helper.js will be executed

您可以在加载脚本中执行此操作。 我的加载脚本如下所示：

function importJsFiles(){
    const scriptFiles = ["http://somewhere/jquery.js",
                         "http://somewhere/stuff.js",
                         "http://somewhere/bootstrapSnippet.js"];
    for (let i = 0; i< scriptFiles.length; i++){
        importJsFile(scriptFiles[i]);
    }
}

function includeSnippet(){
    //See https://www.w3schools.com/howto/howto_html_include.asp
    //We still have to do it without jQuery, 
    //because at the time this executes the injected jquery.js 
    //hasn't run and we do not yet have jQuery available
}



importJsFiles();
//At this point, all script tags are created, but the scripts are NOT loaded yet
includeSnippet();
//At this point, the dom is in its final shape
bootstrapSnippet(); //<- This won't work, because the script tags injected by this code won't be evaluated until after this file/function/whatever returns

//bootstrapSnippet.js
function bootstrapSnippet(){
    alert("Snippet JS running")
    if (window.jQuery) {
            
            alert("JQuery is avaliable"); //<- This will fire, because the new script 
                            // tags are evaluated in order, and we put the
                            // jquery.js one before the bootstrapSnippet.js one
        }

        //So now we CAN do this:
        $('#coolIncludable').show(); 
}

bootstrapSnippet();

在这篇文章中有更多有趣的想法和细节，我从中选择了上面的链接。 我希望有一天我能找到时间去探索它们。