通过jQuery嵌入<script>标签？

Question

我正在尝试通过 for each 循环将 Twitter 脚本与一些 HTML 附加在一起。循环正常工作，直到我在末尾添加 <script> 标记为止。我想要做的是让 jQuery 输出我的数据，然后在信息下面放置一个 Twitter 推文按钮。

我想知道是否有另一种方法让 jQuery 将脚本附加到我的 #entries div 中。

我的代码如下：

$.each(data.Entries, function(entriesIndex, entriesObject) {

    if (entriesObject.Field21 == "Yes") {

        if (entriesObject.Field15 == "Yes") {

            $("<li />", {
                html: '<p><a href="http://twitter.com/share">foo</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></p>'


                // Add it to the page
            }).appendTo("#entries");

        } // end if entry = yes
    } // end if approved = yes

}); // end for each loop

更新

看起来它将脚本放在页面上，但没有触发-不是非常熟悉twitter脚本的工作原理，想知道你们能否帮忙！谢谢！

在这里查看示例页面：http://bostonwebsitemakeover.com/vote.html

    $.each(data.Entries, function(entriesIndex, entriesObject) {

        var p, tweet; // oh hey look, variables!

        if (entriesObject.Field21 == "Yes") {

            if (entriesObject.Field15 == "Yes") {

                     p = $("<p />", {
                    html: "<p>" + '<a href="' + entriesObject.Field19 + '" target="_blank">' + entriesObject.Field4  +  "</p>" + '<img src="http://images.websnapr.com/?url=' + entriesObject.Field19 + '" />' + "</a>"
                    });

                     tweet = $('<script>').attr({
                        type: 'text/javascript',
                        src: 'http://platform.twitter.com/widgets.js'

                    });

            } // end if entry = yes

        } // end if approved = yes


        $('<li class="entry">').append(p).append(tweet).appendTo('#entries');

}); // end for each loop

- nikibrown

Answer 1

$('<script>').attr({
  type: 'text/javascript',
  src: 'http://platform.twitter.com/widgets.js'
}).appendTo('#entries');

我认为这样做可以解决问题。在使用jQuery插入代码时，尽量使用.attr、.text等参数。这样可以使代码更加稳定，并且可以半保护您免受XSS攻击。

编辑 实际上，有趣的是，我认为这是引用限制。即使在jsfiddle上，我似乎也无法导入它，但我可以直接访问它。不过我正在研究它... 算了，它似乎已经加载了，只是在Google Chrome / Firebug DOM树中没有显示出来（但Chrome在资源时间轴中显示它正在加载）。

- Brad Christie

---

@nikibrown：我不确定您对此脚本文件有何期望，直接将<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>放置在页面主体中没有任何效果。这是自动生成内容，还是只是一个使调用Twitter API更容易的库？（我也尝试了各种变化，例如使用.getScript()，但都没有成功） - Brad Christie

啊...忘记放数据属性的链接了 - Twitter脚本会获取该链接并生成一个推文按钮。 - nikibrown

Answer 2

编辑 哇，不要理我。我没有仔细阅读你的问题。这个脚本显然不是你的，因为它位于twitter.com上哈哈。对不起。

---

推文按钮的脚本是在widget.js脚本中加载的吗？如果是，那么这是您编写的自定义脚本吗？我问这个问题是因为您可以修改按钮的点击处理程序，改为使用live()，然后传递字符串“click”和您想要的处理程序函数。这将在动态添加到页面上的每个按钮上附加处理程序。

- Aaron Hathaway

---

听起来很高级啊 :) 实际上这只是标准的 Twitter “推文”按钮。http://twitter.com/about/resources/tweetbutton - nikibrown

Answer 3

看起来你的 <a> 缺少 "twitter-share-button" 类

我认为从外观上看，该脚本查找具有该类的链接并生成按钮和推文计数（实际上是一个 iframe）

我原以为您只需要在页面上加载一次脚本，但它可能无法处理由 JavaScript 动态构建的链接

编辑 http://dev.twitter.com/pages/tweet_button_faq#multiple-buttons 明确说明只需加载一次脚本

- dan shearmur