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

时间:2013-07-04 13:00:37

标签: javascript jquery

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

每个小部件都需要自己的js代码。 FB建议在开始<body>标记之后放置他们的js代码,并且twitters代码似乎很高兴放在结束</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()当使用#选择器删除所有j并且不执行它时,所以没有任何社交小部件加载通过.load()

进行调用时

我已经尝试在html页面中包含js for fb和twitter,这是希望能解决这个问题,但没有任何改变。

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

1 个答案:

答案 0 :(得分:0)

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

要解决这个问题,我已经使用了社交窗口小部件的<iframe>实现。这样就完全消除了<script>标记被删除的问题。

唯一的小问题是twitters iframe实现不支持自定义按钮的宽度和/或高度,但这是一个公平的妥协。