0

在将我的问题称为此问题的副本之前，请通读我的问题。

我的博客文章有一组演示页面。这些页面可以有 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 最后执行；也就是说，在执行源文件包含之后。我不能做以下事情：

  1. 将源文件包含/引用移动到<head>标签，因为 jQuery 包含在正文中。这是为了让源代码查看者知道我正在使用 jQuery。
  2. 将代码添加到演示 JavaScript 以使其等待，因为源代码查看者会感到困惑。
  3. 让演示 JavaScript 等待太久，因为观众不耐烦 :)

有解决办法吗？

4

1 回答 1

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>
于 2012-11-07T21:13:49.800 回答