最后执行jQuery块

在将我的问题称为重复之前，请阅读我的问题。

我为博客文章提供了一组演示页。这些页面可以具有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>

（我知道体内的样式标签不好，我有理由。）

page-wrapperdiv之后，我包括一个JavaScript源文件，该文件创建一个"查看源"链接/按钮。

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

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

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

将源文件包含/引用移动到<head>标签，因为jQuery包含在身体中。因此，源代码查看者知道我正在使用jQuery。
将代码添加到演示JavaScript以便等待它，因为源代码查看器会感到困惑。
使演示JavaScript等待 Too ，因为观众不耐烦：）

是否有解决方案？

看起来您正在创建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>

相关内容

最新更新

热门标签：