从 ajax .load()'ed 内容加载社交小部件答案

【问题标题】：Loading social widgets from ajax .load()'ed content从 ajax .load()'ed 内容加载社交小部件
【发布时间】：2013-07-04 13:00:36
【问题描述】：

我遇到了一个问题，我试图显示一个弹出窗口，该弹出窗口使用 jQuery 的 .load() 函数来使用来自单独页面的内容填充 div。在这个单独的页面中，有 facebook 和 twitter 小部件。

每个小部件都需要自己的 js 代码。 FB 建议将他们的 js 代码放在开头的 <body> 标记之后，而 twitter 的代码似乎很乐意放在结尾的 </body> 标记之前。这个单独的页面在直接查看时可以正常工作。

我正在使用以下函数将单独的页面加载到隐藏的 div 中；

JS

function load_overlay(url)
{
    var wrapper = $('.popup_wrapper');
    var content = $('.popup_wrapper .popup_content');
    content.html(''); // clear out the content first
    content.load(url, function() {

        $('.popup_bg').fadeIn(400, function() {
            wrapper.fadeIn();
            wrapper.animate({
                "top" : $(window).scrollTop() + 360
            });
        });

    });
}
load_overlay('/social-popup #main');

这里的问题是（根据我的阅读）是 .load() 在使用 # 选择器时会去除所有 js 并且不执行它，因此在通过 @ 调用时不会加载任何社交小部件987654328@

我已经尝试在 html 页面中包含用于 fb 和 twitter 的 js，希望能够修复它，但没有任何改变。

如何让这些小部件的 JS 为我的 ajax 加载内容加载？

【问题讨论】：

为什么用#main 加载/social-popup #main？
因为我只想加载该页面的一小部分。我注意到如果我从中删除 #main 这似乎也不起作用
没有#main load 将执行任何javascript代码：api.jquery.com/load
我之前读过同样的内容，并且在测试添加 alert 时这是有效的。然而，两个社交小部件仍然没有加载

标签： javascript jquery

【解决方案1】：

在使用每个社交小部件的 JS 实现时，我无法找到一个好的解决方案。

为了解决这个问题，我使用了社交小部件的<iframe> 实现。这完全消除了<script>标签被移除的问题。

唯一需要注意的是，twitter 的 iframe 实现不支持自定义按钮的宽度和/或高度，但这是一个公平的折衷方案。

【讨论】：