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开发工具，我可以看到草稿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>

页面加载完成后，无法在DIV中更新SCRIPT

1 个答案: