Question

我正在尝试为datatables.min.js写一个CDN后备 - 不知何故，我无法在Google或datatables.net上找到任何内容。在阅读了这个StackOverflow post和这个DataTables post之后，我想出了这个不成功的篇章（甚至尝试了各种各样的表达式）：

<script>
    if (typeof jQuery.fn.dataTable === 'undefined') {
        document.write('<script src="~/scripts/datatables.min.js"><\/script>');            
        //document.write('<script src="~/scripts/datatables.min.js">\x3C/script>'); //same
        //document.write('\x3Cscript src="~/scripts/datatables.min.js"\x3E\x3C/script\x3E'); //same
    }
</script>

为了排除故障，我直接加载了datatables.min.js并得到了这两个令人困惑的结果：

1 /我得到undefined（BAD）：

<script>
    document.write('<script src="~/scripts/datatables.min.js"><\/script>');
</script>
<script>
    alert(typeof jQuery.fn.dataTable);
</script>

2 / ...但不知怎的，我从那里得到function（好）：

<script src="~/scripts/datatables.min.js"></script>
<script>
    alert(typeof jQuery.fn.dataTable);
</script>

对我来说看起来是一样的，特别是因为document.write使用了同步加载。我也试过一个纯粹的DOM方法，但没有运气。

document.write我错过了什么？

Answer 1

试试这个

    <script>
    if (typeof jQuery.fn.dataTable === 'undefined') {
        $.getScript(baseURL + '/scripts/datatables.min.js?' + Math.random(), function () {
            //do stuff here
            alert(typeof jQuery.fn.dataTable);
        });
    }
    </script>

Answer 2

在您的代码document.write和alert将同时处理，请注意警报将在“database.min.js”可用时完成。

使用$（document）.ready（）或winidow.onload，您将看到预期的结果。

虽然在此之前阅读了最佳实践，优点和缺点 -

http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/

我建议使用RequireJS来有效地执行此操作，如Scott Hanselman所述，请在尝试之前通过以下链接，因为他详细讨论了CDN后备并涵盖了它的各个方面 -

http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

希望它会有所帮助，并为您提供找到正确方向的坚实基础。

Answer 3

在接受的回退做法之后，DataTables的正确CDN回退是：

<script>
    if (typeof jQuery.fn.dataTable === 'undefined') {
        document.write('\x3Cscript src="/scripts/datatables.min.js"\x3E\x3C/script\x3E');
        //document.write('<script src="/scripts/datatables.min.js"><\/script>');
    }
</script>

或只是

<script>window.jQuery.fn.dataTable || document.write('\x3Cscript src="/scripts/datatables.min.js"\x3E\x3C/script\x3E')</script>

src=""中的tilda / relative路径是问题所在，正如@ParthTrivedi所建议的那样（见评论）。根据此post，“在脚本中时，路径相对于显示的页面”。

DataTables.js的CDN后备

3 个答案: