Question

我有一个网页，该网页使用模板进行导航，并根据用户交互来填充/显示模板。

它工作得很好，但是模板中包含一些JS。刚加载页面时，此JS代码已正确加载（在下面的示例中，它提供一个警告：“ Hi”）。但是，无论在Chrome还是Firefox中，我都看不到调试器控制台中的代码。

我在下面提供了一个最小的示例，在控制台中>本地主机下的Source中，只有我的HTML页面和Asset / js子文件夹中的jquery.min.js。

这是我的HTML：

<script src="assets/js/jquery.min.js"></script>
<template id="my_screen">
    Hello
    <script type="application/javascript" src="assets/js/testouille.js"></script>
</template>

<section class="container">
    <div class="my_screen hide"></div>
</section>


<script type="application/javascript">
    function useTemplate(elem) {
        var myTemplate = $('#' + elem),
            normalContent = $('.' + elem),
            clonedTemplate = myTemplate.html();
        normalContent.empty();
        normalContent.append(clonedTemplate);
    }

    $(document).ready(function() {
        useTemplate('my_screen');
    }
    )
</script>

这是我的Javascript：

alert("Hi");

有什么主意吗？

Answer 1

由于testouille.js位于<template>中，因此页面加载时浏览器不会自动加载它。

当您克隆模板并将其附加到常规DIV时，jQuery将使用$.getScript()模拟加载文件。在Chrome调试器中，以这种方式加载的代码将显示在Sources中的VM:####文件名（其中####是任意数字）中，而不是其实际文件名中。

您可以通过在testouille.js中添加以下注释来使调试器为其指定文件名：

//# sourceURL=testouille.js

JS源在Chrome / Firefox调试器中不可见，但已正确加载到页面中

1 个答案: