页面加载后无法更新 DIV 中的 SCRIPT答案

【问题标题】：Unable to update SCRIPT inside DIV once page has loaded页面加载后无法更新 DIV 中的 SCRIPT
【发布时间】：2018-08-12 15:36:06
【问题描述】：

以下代码有效：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scratch">
    <script>
        console.log("Foo");
    </script>
</div>


<script>

    $(document).ready(function () {
        setTimeout(updateScratch,2000);
    });

    function updateScratch() {
        var newHTML = '<script>console.log("Bar")</scr'+'ipt>';
        $(".scratch").html(newHTML);
    }

</script>

如果我运行它，控制台会显示 Foo，两秒钟后，会出现 Bar 这个词。

但是，如果我有以下代码，它就不起作用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scratch">

<script src="https://static.kuula.io/embed.js"
        data-kuula="https://kuula.co/share/7PHTd?fs=0&vr=0&gyro=0&autorotate=0.47&thumbs=1&hideinst=1&chromeless=1&logo=-1"
        data-width="100%"
        data-height="500px"
        ></script>

</div>


<script>

    $(document).ready(function () {
        setTimeout(updatePanorama,10000);
    });

    function updatePanorama() {
        var newField = '7PH7S';
        var newHTML = '<script src="https://static.kuula.io/embed.js" ';
        newHTML += 'data-kuula="https://kuula.co/share/' + newField;
        newHTML += '?fs=0&vr=0&gyro=0&autorotate=0.47&thumbs=1&hideinst=1&chromeless=1&logo=-1" ';
        newHTML += 'data-width="100%" data-height="500px">';
        newHTML += "</scr"+"ipt>";

        $(".scratch").html(newHTML);
        setTimeout(updatePanorama,10000);
        console.log("Here we go again...");
        console.log(newHTML);
    }

</script>

显示初始全景。我知道函数 updatePanorama 被正确调用，因为“我们又来了……”在控制台中每 10 秒出现一次。

最后，使用 Chrome 开发工具，我可以看到临时 div 包含更新后的 HTML。

但是脚本第二次执行失败。我没有看到新的全景图。旧的消失了，但新的没有出现。

【问题讨论】：

How to force a script reload and re-execute?的可能重复
下面我的回答解决了你的问题吗？任何反馈将不胜感激
嗨，没有。我以为我早点回复了。我最终放弃了尝试，并以另一种方式解决了这个问题。不过感谢您的尝试。

标签： javascript jquery html

【解决方案1】：

在脚本中有一个条件可以确保代码只加载和执行一次：

if (!window._kuulaEmbedScriptLoaded) {
  window._kuulaEmbedScriptLoaded = !0;
  ...
}

这可能会阻止您的二次执行。您还需要手动调度DOMContentLoaded 事件（例如，如here 所述）：

var DOMContentLoaded_event = document.createEvent("Event");
DOMContentLoaded_event.initEvent("DOMContentLoaded", true, true);
window.document.dispatchEvent(DOMContentLoaded_event);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scratch">

<script src="https://static.kuula.io/embed.js"
        data-kuula="https://kuula.co/share/7PHTd?fs=0&vr=0&gyro=0&autorotate=0.47&thumbs=1&hideinst=1&chromeless=1&logo=-1"
        data-width="100%"
        data-height="500px"
        ></script>

</div>


<script>

    $(document).ready(function () {
        setTimeout(updatePanorama,10000);
    });

    function updatePanorama() {
        var newField = '7PH7S';
        var newHTML = '<script src="https://static.kuula.io/embed.js" ';
        newHTML += 'data-kuula="https://kuula.co/share/' + newField;
        newHTML += '?fs=0&vr=0&gyro=0&autorotate=0.47&thumbs=1&hideinst=1&chromeless=1&logo=-1" ';
        newHTML += 'data-width="100%" data-height="500px">';
        newHTML += "</scr"+"ipt>";

        $(".scratch").html(newHTML);
        
        window._kuulaEmbedScriptLoaded = false;
        var DOMContentLoaded_event = document.createEvent("Event");
        DOMContentLoaded_event.initEvent("DOMContentLoaded", true, true);
        window.document.dispatchEvent(DOMContentLoaded_event);

        setTimeout(updatePanorama,10000);
        console.log("Here we go again...");
        console.log(newHTML);
    }

</script>

【讨论】：