页面加载后，无法更新DIV内的脚本

Question

下面的代码可以工作：

​

<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 Dev工具，我可以看到scratch div包含了更新后的HTML。

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

Answer 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>

​