Question

类似于

Proper way to execute a script tag in a Knockout HTML template

据我了解，<script>标签可以放在正文中的任何位置，并且在初始页面加载和解析时可以正常运行。我正在使用KO组件，我想在组件内部包含一个<script>标签。我这样做是为了可以将组件与JS功能链接在一起，以便它们一起进入和离开DOM。

如果我运行以下命令，它将加载并执行<script>标记的内容：

function loadJs(file, hash){
    var fileObj=document.createElement('script');
    fileObj.setAttribute('type','text/javascript');
    fileObj.setAttribute('src', file);

    if (hash != undefined) {
        fileObj.setAttribute('integrity', hash);
    }

    fileObj.setAttribute('crossorigin', 'anonymous')
    document.getElementsByTagName('head')[0].appendChild(fileObj);
}

如果我使用KO默认加载器加载/注册该组件，则该组件将正确加载，但是script标记的内容不会执行。 component绑定看起来都很好：

ko.components.register(name, {
    viewModel: { instance: containerVm },
    template: html
});

我是否错过了“加载”步骤或注册后执行组件内容的操作？

Answer 1

首先，打开您的应用程序，导航到应该获取文件的位置，在开发工具中打开控制台，然后粘贴以下内容：

var fileObj=document.createElement('script');
        fileObj.setAttribute('type','text/javascript');
        fileObj.setAttribute('src', 'put/some/js/path/here/for/testing');
        fileObj.setAttribute('crossorigin', 'anonymous');
        fileObj.onload = function(){ console.log('tadaa');};
        document.getElementsByTagName('head')[0].appendChild(fileObj);

这应该可以提取文件并在“网络”标签中记录请求。

请确保您的代码确实调用了此函数，也许您可以尝试以下操作：

function loadJs(file,hash){
    var fileObj=document.createElement('script');
    fileObj.setAttribute('type','text/javascript');
    fileObj.setAttribute('src', file);

    if (hash != undefined) {
        fileObj.setAttribute('integrity', hash);
    }

    fileObj.setAttribute('crossorigin', 'anonymous');
    fileObj.onload = function(){
     // anything that requires this script to be loaded should go in here
    };
    document.getElementsByTagName('head')[0].appendChild(fileObj);
}

要使其更通用，应将onLoad作为回调传递，即：

function loadJs(file, onScriptLoaded, hash){
        var fileObj=document.createElement('script');
        fileObj.setAttribute('type','text/javascript');
        fileObj.setAttribute('src', file);

        if (hash != undefined) {
            fileObj.setAttribute('integrity', hash);
        }

        fileObj.setAttribute('crossorigin', 'anonymous');
        fileObj.onload = onScriptLoaded;
        document.getElementsByTagName('head')[0].appendChild(fileObj);
    }

然后，您可以在加载js文件时随时传递回调，该操作应在加载文件时执行您想做的任何事情。

带有绑定的

1 个答案: