Question

在将问题称为this one的副本之前，请先阅读我的问题。

我的博客帖子有一组演示页面。这些页面可以包含CSS，HTML，jQuery / JS或三者的任意组合。页面组织如下：

<div id="page-wrapper">
<style type="text/css">
//CSS here.
</style>

<!--Include jQuery here-->
<script type="text/javascript">
//JS here
</script>

<!--Demo HTML would go here-->
</div>

（我知道身体中的风格标签很糟糕，我有我的理由。）

在页面包装器div之后，我包含一个JavaScript源文件，用于创建“查看源”链接/按钮。

问题出现是因为演示JavaScript可能包含对CSS的更改，并且这些更改显示在演示HTML中（例如style="color: #ff0000; "），因为代码被JavaScript源文件“获取”结束，如下：

var sourceCode = "<!DOCTYPE HTML>\n<html>" + $('html').html() + "\n</html>";

我希望演示jQuery最后执行;也就是说，在执行源文件包含之后。我不能做以下事情：

将源文件包含/引用移动到<head>标记，因为jQuery包含在正文中。这样源代码查看器就知道我正在使用jQuery。
将代码添加到演示JavaScript中以供其等待，因为源代码查看器会混淆。
由于观众不耐烦，让演示JavaScript等待太长：）

有解决方案吗？

Answer 1

看起来你正在创建类似jsFiddle或jsBin的东西。

您可以做的是确保将要注入模板的JS代码注入函数回调。 onload事件听起来应该做你想做的事。

<div id="page-wrapper">
    <style>
        <!-- ### demo CSS -->
    </style>
    <script>
        (function ($) {
            $(window).load(function () {
                <!-- ### demo JS -->
            });
        })(jQuery);
    </script>
    <!-- ### demo HTML -->
</div>

根据您的实施情况，这可能不起作用，因此您可以尝试触发自定义事件回调，如果onload没有删除它。

<script>
    (function ($) {
        $(window).on('my.custom.event', function () {
            <!-- ### demo JS -->
        });
    })(jQuery);
</script>
<!-- ### demo HTML -->
<script>
    jQuery(window).trigger('my.custom.event');
</script>

最后执行jQuery块

1 个答案: