主页 / 问题 / 1585861
Accepted
S.H.
Asked:2024-07-02 16:32:36 +0000 UTC2024-07-02 16:32:36 +0000 UTC

通过 document.head.appendChild(my_script) 插入脚本后如何执行脚本？

  • 772

我就遇到了这个困难。

我使用以下代码加载脚本（并将其添加到页面）：

    var my_script = document.createElement('script');
    my_script.setAttribute('type','text/javascript');
    my_script.setAttribute('src','https://mysite.ru/storage/script.js');
    document.head.appendChild(my_script);
    function_onload();

在本例中，最后一行function_onload()是对已加载脚本中已有函数的调用。在这一行我得到一个错误

    polyfills-es5.js:1 Uncaught ReferenceError: function_onload is not defined

哦，那好吧。

添加脚本（）的操作document.head.appendChild(my_script)是异步的，在我调用该函数的那一刻function_onload，它还没有完成。

我尝试了不同的方法：

写道

    my_script.async = false;

在通话之前my_script.setAttribute，（这没有影响任何事情）

尝试重写风格的最后一行

    document.head.appendChild(my_script)
    .then ( () => function_onload() );

在执行此操作时，我收到另一个错误 -TypeError: document.head.appendChild(...).then is not a function

当然，您可以“设置闹钟”（设置计时器），但这是一个非常不可靠的解决方案......

在这种情况下可以做什么呢？您如何知道脚本已经下载并准备好执行？

谢谢。

javascript

2 个回答

  1. Best Answer

    在这种情况下可以做什么呢？您如何知道脚本已经下载并准备好执行？

    元素本身document.createElement('script')有一个事件load。加载脚本后它就“起作用”了。

    剩下的就是附加一个处理程序，它将调用（已加载的）函数。像这样的东西...

    my_script.addEventListener('load', _ => function_onload())
    • 3

  2. 我遇到了问题的复杂性，它与以下内容相关：

    在问题（和答案）的示例中，脚本具有“src”属性。

    并且脚本是从某个 URL 加载的。

    当代码加载时，您需要运行该代码中的函数之一。

    在这种情况下，要启动，您需要使用“加载”事件并使用“挂起”它

    my_script.addEventListener('load', _ => function_onload());

    但是如果脚本不应该从外部源加载怎么办？

    事实证明，在这种情况下，任务似乎被“简化”了，但是......“加载”事件不再起作用！

    在这种情况下，一切都更简单：

    让我们有一个脚本主体（在 my_script_body 变量中）。然后我们做这样的事情：

    <html>
<head>
    <script>

    function body_onload(){
        var my_script_body = 'function myScriptFunction(){ alert(\'Hi from myScriptFunction!\'); }';
        var my_script = document.createElement('script');
        my_script.setAttribute('type','text/javascript');
        //my_script.innerText = my_script_body;
        my_script.innerHTML = my_script_body;
        document.head.appendChild(my_script);
        myScriptFunction();
    }

    </script>
</head>
<body onload='body_onload();'>
<h4>
    Это пример, казалось бы, простой функциональности
</h4>
</body>
</html>

    此示例在访问页面时显示警报。在这种情况下，脚本的“主体”被添加my_script.innerText=...或my_script.innerHTML=...，并且脚本“以同步方式”启动，无需等待任何事件，通过调用myScriptFunction();

    • 0

相关问题