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

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

我想提供一个其他页面可以包含的小 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 是代码片段末尾的标签要做的事情之一。

解决方法

由于您使用的是 jQuery，您可以使用它内置的 load() 方法来做您想做的事

类似于：

HTML

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

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

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

Simple working demo

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

行$(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 Script 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();

this post 中有更多有趣的想法和细节，我从中选择了上面的链接。我希望有一天我能抽出时间来探索它们。

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

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

解决方法

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

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

相关推荐