Question

我有一个简单的类，可以在调用content.html时附加MyClass.display()文件。

class MyClass
    @display: (display) ->
      $.get 'content.html', (data) ->
        $('body').append data

上面的代码总是将数据附加到body的末尾。

HTML代码就是这个

<html>
  <head></head>
  <body>
    <p>text before</p>
    <script src="file.js" type="text/javascript"></script>
    <script type="text/javascript">
      MyClass.display();
    </script>
    <p>text after</p>
  </body>
</html>

我想知道如何在触发该函数的封闭</script>标记之后附加数据。这将介于</script>和以下<p>标记之间。

一个要求是我不应该修改HTML标记。我无法直接在标记中添加ID，如下面的答案之一所示。

我知道这是可能的，因为我可以在Google AdSense代码中看到它。但由于他们的javascript代码似乎是加密的，我无法解码它是如何完成的。

知道如何实现这个目标吗？

Answer 1

当javascript代码正在运行时，其包含的脚本标记是DOM对象中可用的最后一个元素

你可以抓住它的参考，比如这样，

var ele = $('script:last');

从那里开始，根据content.html的内容，您可以执行必要的工作，在脚本标记之后放置内容（而不是追加在脚本标记内，那不是你要找的东西）

e.g。如果content.html有自己的顶级元素p

<p> <strong>hello</strong> world! </p>

然后你可以简单地

var MyClass = { display: function() { var ele = $('script:last'); $.get('content.html', function(data) { ele.after(data); }); } }

注1：您必须在ele回调之外获得引用$.get。回调以异步方式运行 - 那时DOM可能会加载更多元素而script:last可能不再是你的脚本标记。

注意2：如果content.html不包含包装整个内容的顶级元素，那么您必须自己将其包装在回调中，例如ele.after("<div class='my-own-wrapper'>" + data + "</div>");

供参考：https://gist.github.com/4122339

Answer 2

我明白你要做什么。您希望在标记的某些区域中插入HTML。

我建议你做这样的事情：

class MyClass
    @display: (display) ->
      $.get 'content.html', (data) ->
        document.write data

和

<html>
  <head></head>
  <body>
    <p>text before</p>
    <script src="file.js" type="text/javascript"></script>
    <script type="text/javascript">
      MyClass.display();
    </script>
    <p>text after</p>

  </body>
</html>

将脚本放在页面底部非常重要，这样标记才有可能加载。否则，您的脚本可能会在页面加载完成之前运行。

如何将数据附加到启动方法的元素？

2 个答案: